jQuery的延遲，直到背景圖像加載，然後淡入？

我一直在做很多的研究，並有大量的插件和教程，其中涵蓋了使用大型背景圖片。不幸的是，他們都有一個共同點 - 他們使用絕對定位的圖像來表現爲「假」背景圖像。jQuery的延遲，直到背景圖像加載，然後淡入？

通常情況下，將工作對我罰款，我過去就這麼做過，但是，這個項目有一個重複的背景圖片，所以這是必要的，我正常使用CSS規則來聲明的背景圖像。

之所以這麼說，有沒有一種方法來檢查，看看是否加載圖像，並告訴了jQuery淡出此背景圖像中一旦裝？我正在尋找的主要事情是jQuery驗證圖像是否實際加載的一種方法。如果不是這樣，那麼我想我需要解決一個簡單的靜態延遲（很遺憾，對於連接速度慢的用戶而言，這種影響會被破壞）。

最後一件事 - 這可以通過CSS類開關/撥動來完成，這樣我可以和之前的圖像加載後變身類？這將是一個沒有JavaScript的用戶的後備，並會使它，所以我不必.hide()我的整個身體，而背景圖片加載。

*編輯：此線程似乎有類似的討論，但我不認爲這是完全一樣的事情：How do I delay html text from appearing until background image sprite is loaded? *

* EDIT 2 *

看起來像上面的線程畢竟工作，除了我仍然失去淡入效果。我將故事情節設置爲故意高，並且出於某種原因沒有動畫效果，爲什麼？

<script> 

$(function() { 
     // create a dummy image 
    var img = new Image(); 

     // give it a single load handler 
    $(img).one('load',function() { 
     $('html').css('background','url(<?php bloginfo('template_url'); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads 
    }); 

     // declare background image source 
    img.src = "<?php bloginfo('template_url'); ?>/images/red_curtain.jpg"; 

     // make sure if fires in case it was cached 
    if(img.complete) 
     $(img).load(); 
}); 

</script>

來源

2011-03-06 Brian

這似乎是一個古老的線程，但我找到了一個解決方案。希望它可以幫助：

$(window).load(function(){ 
    $('<img/>').attr('src', 'images/imgsrc.png').load(function() { 
     $('#loading').fadeOut(500);  
    $('#wrapper').fadeIn(200); 
}); 
});

來源

2013-08-10 04:55:52

要檢查加載圖像時，聲明另一個，「正規」的圖像（即，<img>標記）具有相同的src和附加事件處理程序到它。瀏覽器不會加載相同的圖像兩次，因此該事件也意味着加載了背景。

另一個竅門，我可以建議是回到「假」的背景。爲了使其成爲「平鋪」，您可以創建一個iframe，拉伸以覆蓋整個身體，並將該圖像作爲背景，然後根據需要淡化iframe，而頁面的其餘部分則安全地保留在「主要「框架。

來源

2011-03-06 11:02:58

使用的$（document）.load（）來實現你想要什麼。

「我設置淡入故意高，它不是動畫出於某種原因，任何想法，爲什麼？」

是，就在頁面加載

來源

2011-03-06 12:35:50 AlanFoster

任何想法如何通過切換體類實現效果？我希望它能夠優雅地降級（例如，對於禁用javascript的用戶，不會切換到正文的類） – Brian 2011-03-07 15:48:50

添加display: none;到你的身體標記

<body style="display: none">

然後使用jQuery修改您的代碼，以便它看起來像這樣：

$(img).load(function(){ 
    $("body").show(); 
});

現在頁面內容只會在img加載完成後顯示。

來源

2011-03-06 15:54:00 Hussein

這很好，但我想通過類切換來做到這一點，沒有啓用JavaScript。 – Brian 2011-03-07 15:47:32

我不明白..你已經在你的問題上面使用了javaScript。 jQuery是javaScript。 – Hussein 2011-03-07 18:07:43

jQuery的延遲，直到背景圖像加載，然後淡入？

回答

相關問題