javascript - window.on 加载函数只在一个页面上执行

Question

当页面加载时，我让这个 JS 在包装器中淡出:

$(window).on('load', function(){
  $(".wrapper").fadeIn();
  ...
});

它适用于一个页面，但不适用于任何其他页面。
在那里， wrapper 不会淡入。
我尝试了一个 console.log 但它也不起作用，所以该函数根本没有执行。

JS 文件通过 PHP-include 加载:

<?php
  include 'website/inc/head.php';
?>

head.php 加载main.js。每个页面都一样。但它不会在除一个页面之外的所有页面上执行该功能。

顺便说一句，我正在使用 $(window).on('load', function(){...});，因为我得到一个 a.indexOf 是not a function 使用 $(window).load(function(){...}); 时出错

---

你可以在 my website上查看.打开导航并转到它正在工作的“投资组合”。

Answer 1

您在 main.js 中具有以下结构:

 $(document).ready(function(){
   // this code is applied when `document.ready` fires`

   $(window).on('load', function(){
     // this code is applied when `window.load` fires
     // if it was bound before `window.load` fired
   });

 })

里面的代码$(document).ready当您的 main.js 时不适用被解析，但是当ready在 $(document) 上触发.

$(document).ready()当 DOM 完成构建时触发。
(基本上浏览器会遇到 </html> 标签)。

$(window).load()当所有资源(脚本、样式、图像...)加载完成时触发。

当 document.ready事件触发，应用该函数内的代码，同时浏览器继续加载资源。
如果页面非常轻且与服务器的连接非常快，window.load将在浏览器完成应用来自 $(document)ready(...) 的代码之前触发.所以它可能会在 window.load 上绑定(bind)监听器在 window.load 之后已经解雇了。

解决方案是在 window.load 上绑定(bind)监听器什么时候main.js被解析，而不是在 document.ready 时火灾:

 $(document).ready(function(){
   // this code is applied when `document.ready` fires`
 })
 $(window).on('load', function(){
   // this code is applied when `window.load` fires
   // and now you can be sure it has been bound before `window.load`
 });