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

Question

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

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

现在我的 #container div 包含了所有的网站内容。我不希望这些内容在我的 body 背景图片完全加载之前就显示出来...所以，在背景图片加载时，#preLoader div 显示一个带有动画效果的 loader gif。

问题是：

由于服务器上的某些资源不可用（例如 gravatars），因此一些元素并不总是会加载...因此，$(window).load() 函数从未执行过，因为页面还没有加载完成 - 它一直在尝试下载不可用的资源，并继续显示 loader。

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

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

- DextrousDave

---

那个特定的背景图片元素，使用load事件怎么样？而不是使用window。$('#divcontainingbackgournimage').load(function(){.. - bipen

是的，但如果您有许多其他元素需要在显示内容之前完成加载呢？那么唯一的方法就是逐个定位它们吗？ - DextrousDave

@bipen DIV元素即使设置了背景图片也没有加载事件。 - A. Wolff

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

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

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

- Blender

---

是的，我想我可以做到。如果您还有许多其他元素需要等待加载完成呢？ - DextrousDave

@DextrousDave：你可以使用一个插件：https://github.com/alexanderdickson/waitForImages - Blender

谢谢您的帮助。有没有其他方法可以不使用插件来完成这个任务？ - DextrousDave

@DextrousDave：这个被压缩的插件非常小。它只有1000个字符长，仅比我的第一个示例长四倍。 - Blender

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

- Stanislav Terletskyi