以$（窗口）.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（）問題

回答

相關問題