Question

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

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

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

JS文件通过PHP-include加载：

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

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

顺便说一句，我使用$(window).on('load', function(){...});，因为在使用a.indexOf is 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)时触发。

当DOM完成构建时，

$(document).ready()会激活（基本上，浏览器符合</html>标记）。

当所有资源（脚本，样式，图像......）完成加载时，

$(window).load()将触发。

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

解决方案是在解析window.load时绑定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`
 });

window.on加载函数仅在一个页面上执行

1 个答案: