jquery 等待所有内容被加载（包括 img）答案

【问题标题】：jquery wait all content is loaded (include img)jquery 等待所有内容被加载（包括 img）
【发布时间】：2013-06-16 19:45:21
【问题描述】：

我有一个允许从页面加载一些内容的脚本，我只想在所有内容完全加载后执行一些内容。

我试过这个脚本，但在 IE 中似乎还不够：

$(".ajaxify_container").load('single.php?page='+url.substring(1)+' #single-container', null, function(){
    $(".Slide img").on("load", function () { 
        load_content_animation();
    });
})

【问题讨论】：

标签： jquery function load wait

【解决方案1】：

编辑 - 1

var $images = $(".Slide img"), imageCount = $images.length;
var counter;

$(".Slide img").on("load", function () { 
   counter++;
   if (counter == imageCount) {
       load_content_animation();
   }
});

原创

我只想在所有内容都完成后才执行一些东西已加载。

使用window load。这将在所有内容下载完成后执行。

jQuery(window).load(function () {
   //Your code comes here
});

【讨论】：

谢谢，但它不能像加载内容那样工作，因为它已经在窗口加载时触发...
@freaky : 正如你所说我只想在所有内容完全加载后执行一些东西。
它不起作用，因为舒尔。这是因为我使用 pushstate 或 hashchange 函数...
@freaky : ajaxify_container 的 html 是什么？
我想我找到了我的问题。我只是意识到每次加载 img 时都会触发$(".Slide img").on("load", function () {。所以它每次触发我的滑块功能。我需要在所有 img 加载之后执行我的动画功能，而不是在每个之后...

【解决方案2】：

包装你想隐藏的内容，直到页面加载一个 div：

<div class="hide">
    <!-- Content hidden when page is loading -->
</div>

使用 CSS 隐藏内容：

.hide {
    display: none;
}

然后使用JQuery隐藏和显示内容：

jQuery(window).load(function() {
    $('.loading').fadeOut(1000);
    $('.hide').show();
});

【讨论】：

谢谢，但我不能这样做...我真的想等待所有 img 都加载完毕，因为我只想在加载所有图像时才初始化滑块。如果我不这样做，我的网站就会冻结...
@freaky 这正是这样做的，用 DIV 包裹你的滑块以隐藏它和它的图像，并且在页面完全加载所有图像之前，滑块不会显示。跨度>
我知道这种技巧，但在我的情况下它不能工作..这是不可能的，因为它是由于历史 pushstate 或 hashchange 而加载的，并且这个函数已经与 window.load 一起工作