Question

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

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

现在我的#container div包含我的所有网站内容。我不想在我的身体背景图像完全加载之前显示它...所以当加载背景图像时，＃preLoader div显示内部带有动画加载器的gif。

问题：

由于服务器包含资源不可用，有些元素并不总是加载（例如gravatars）...因此$(window).load()函数从未执行，因为页面尚未完成加载 - 它卡住了尝试下载不可用的资源并继续显示加载程序。

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

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

Answer 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();
    });
});

Answer 2

你应该尝试一些技巧。对所有元素（如gravatar：

）进行页面来源更改

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

看，它没有“src”属性，浏览器definetly不加载这个图像和页面加载速度快，你的脚本显示正如你期望的那样。

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

   $('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);   
        }
    });
});

用$（window）.load（）问题预加载

2 个答案: