预加载 $(window).load() 问题答案

【问题标题】：Preloading with $(window).load() issue预加载 $(window).load() 问题
【发布时间】：2013-06-12 18:42:40
【问题描述】：

我正在使用以下方法来预加载我网站的内容：

$(window).load(function(){
    $('#preLoader').hide();
    $('#container').show();
});

现在我的#container div 包含了我所有的网站内容。在我的身体背景图像完全加载之前，我不希望它显示出来......所以当背景图像被加载时，#preLoader div 会显示一个动画加载器 gif。

问题：

由于包含资源的服务器不可用，某些元素并不总是加载（例如 gravatars）......所以$(window).load() 函数永远不会执行，因为页面尚未完成加载 - 它卡在尝试下载不可用的资源并一直显示加载器。

如何忽略响应时间过长的请求，以便我的加载函数可以执行 - 隐藏加载程序并显示内容。

我不想使用$(document).ready() 函数，因为它不会等到我的背景图片完成加载...

【问题讨论】：

如何仅对特定背景图像元素而不是窗口使用加载事件。 $('#divcontainingbackgournimage').load(function(){..
是的，但是如果您有许多其他元素要在显示内容之前完成加载...？那么单独针对他们的唯一方法是什么？
@bipen DIV 没有加载事件，即使设置了任何背景图像

标签： jquery preloader

【解决方案1】：

如果你只是想预加载背景图片，你可以这样做：

$(document).ready(function() {
    $('#preLoader').show();
    $('#container').hide();

    $('<img>', {src: '/url/of/image.jpg'}).load(function() {
        $('#preLoader').hide();
        $('#container').show();
    }).error(function() {
        // Something went wrong
    });
});

更好的选择是使用waitForImages plugin:

$(document).ready(function() {
    $('#preLoader').show();
    $('#container').hide();

    $(document).waitForImages(function() {
        $('#preLoader').hide();
        $('#container').show();
    });
});

【讨论】：

是的，我想我能做到。如果还有更多元素要等待完成加载怎么办？
@DextrousDave：有一个插件可以使用：github.com/alexanderdickson/waitForImages
感谢您的帮助。不使用插件还有其他方法吗？
@DextrousDave：缩小的插件非常小。它有 1000 个字符长，仅比我的第一个示例长四倍

【解决方案2】：

你应该尝试一些技巧。为所有元素（如 gravatar）更改页面源代码：

<img data-src="http://some-very-busy-resource.org/avatar.jpg" />

看，它不存在“src”属性，浏览器肯定不会加载此图像并且页面加载速度很快，您的脚本会按预期显示正文。

然后，要加载忽略的图像，请添加以下代码：

   $('body').find('img').each(function(){
        src = $(this).data('src');

        if ('undefined' !== typeof src) {
            $(this).attr('src', src);   
        }
    });

所以，新脚本应该如下：

$(function(){
    $('#preLoader').hide();
    $('#container').show();
    $('body').find('img').each(function(){
        src = $(this).data('src');
        if ('undefined' !== typeof src) {
            $(this).attr('src', src);   
        }
    });
});

【讨论】：