4

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

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

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

问题：

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

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

我不想使用该$(document).ready()功能，因为它不会等到我的背景图像完成加载...

4

2 回答 2

3

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

$(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 插件：

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

    $(document).waitForImages(function() {
        $('#preLoader').hide();
        $('#container').show();
    });
});
于 2013-06-12T18:46:17.323 回答
0

你应该尝试一些技巧。为所有元素（如 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);   
        }
    });
});
于 2013-06-12T19:16:37.130 回答