Question

在过去的几天里，我花了很多时间试图找到一些代码，允许我在浏览器加载页面时执行某些操作。

我在http://callmenick.com/post/check-if-everything-loaded-with-javascript

找到了此代码

<script>
var everythingLoaded = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      clearInterval(everythingLoaded);
      $('div#loader').hide();
      $('div#main-container').fadeIn(1200);
    }
}, 10);
</script>

这段代码确实有效，但出于某种原因我无法理解在首次加载页面时干扰此功能。但是一旦我做了调整大小，该函数就会触发

$(document).ready(function() {
    equalTiles(); //sets the height equal to calculated width

    $(window).on('load resize orientationchange',function(){ 
        equalTiles();
    });

});

Answer 1

jQuery＆＃39; $(document).ready()帮助器与窗口加载事件不同。区别在于：

$(document).ready(function() {
  // The browser is now aware of the entire DOM structure,
  // but images and other resources may not have finished downloading yet.
  // Include code here that depends on a DOM element being present,
  // but doesn't depend on images being fully loaded yet.

  // It looks none of your code actually wants to be in here as it all depends on images.
});

$(window).on("load", function() {
  // All images are loaded now.
  // Include code here that depends on images being loaded.

  equalTiles();
  $('div#loader').hide();
  $('div#main-container').fadeIn(1200);

  $(window).on("resize orientationchange", function(){ 
    equalTiles();
  });
});

Answer 2

除了Josh的回答，更常见的是，将函数直接传递给jQuery或$。

$(function() {
    // code that runs once the window is ready
});

检查浏览器是否已完成加载页面

2 个答案: