以$（窗口）.load（）问题

预压我用下面的方法预紧我的网站的内容：

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

现在我的#container div包含我所有的网站内容。我不希望这个被显示，直到我的身体背景图像已经完全加载...所以，当加载背景图像时，#preLoader div显示一个动画加载器gif里面。

问题：

有包含资源不是可用的一些元素并不总是负载（例如gravatars）由于服务器...所以$(window).load()函数不执行，因为该页面还没有完成加载 - 它试图下载一个不可用的资源，并持续显示加载器。

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

我不想使用$(document).ready()功能，因为它没有等到我的背景图片加载完毕...

来源

2013-06-12 DextrousDave

如何使用load事件为特定的背景图像元素而不是只窗户。 '$（'＃divcontainingbackgournimage'）。load（function（）{..' – bipen

是的，但是如果你有很多其他元素需要在显示你的内容之前完成加载......？他们单独吗？ – DextrousDave

@bipen即使任何背景图像已被设置，DIVs没有负载事件 –

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

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

来源

2013-06-12 18:46:17 Blender

是的我想我可以做到这一点。如果有更多的元素，你想等待完成加载？ – DextrousDave

@DextrousDave ：有一个插件可以使用：https：//github.com/alexanderdickson/waitForImages – Blender

感谢您的帮助。任何其他的方式来做到这一点，而不使用插件？ – DextrousDave

你应该尝试一些技巧。在网页源代码中做出改变像的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); 
     } 
    }); 
});

来源

2013-06-12 19:16:37

以$（窗口）.load（）问题

回答

相关问题