等待，直到加載了背景（css）中的圖像

Question

假設我們有一張圖片幻燈片。這些圖片的縮略圖顯示在帶有滑塊（我使用Jquery創建）的div包裝器中，每張圖片都包含在一個帶有CSS背景集的<li>中，這當然代表圖像。我選擇使用背景圖片作爲佈局問題，因爲它們的大小和寬高比都不相同。

圖像來自數據庫，並動態創建。

我想要做的是：

顯示「加載」消息，在每一個<li>，等到背景（圖像）加載在緩存中，然後用淡入表現出來。 他們只我能想到的（不，我不能，因爲我不是很清楚如何，如果它是可行的）的方法是：

• 時間沒有設置背景爲每一個<li>同時顯示「加載」消息
• 使每一個背景循環來獲得圖像URL
• 使用$不用彷徨函數加載它，然後做我想做的事情加載

旁可行的事情後，這將意味着他們將加載所以如果一個人不會加載一些reas對腳本永遠不會繼續！

我見過一些使用JS加載圖像的網站，只有當瀏覽器可見時，也許這可能與我查找的情況相同，因爲我使用的是滾動條，圖像顯示在一次，當頁面加載

Answer 1

嗯，我認爲事情可能會更簡單，如果你只使用img標籤，但如果你想使用背景圖像，那麼我只能想出一個解決辦法。

訣竅是創建一個新的圖像（使用the Javascript image object），並確保它已加載，但不顯示此圖像。一旦圖像加載並在緩存中，該圖像將在您的圖庫中作爲背景圖像提供。

因此，您所要做的就是確保在加載相應的圖像後，您只能更改圖像的背景圖像LI。您最初可以加載所有LI s的默認「加載」圖像。

所以，你的代碼將是這樣的：

HTML（該style用於加載圖像的定義可能是你外部樣式表）：

<ul> 
<li id="pic1" style="background-image:url('images/loading.gif')"></li> 
<li id="pic2" style="background-image:url('images/loading.gif')"></li> 
<li id="pic3" style="background-image:url('images/loading.gif')"></li> 
... 
</ul> 

你的jQuery/JavaScript的：

var img = new Array(); 

// The following would be in some sort of loop or array iterator: 

var num = [NUMBER] // You'd use this number to keep track of multiple images. 
    // You could also do this by using $("ul>li").each() and using the index # 

img[num] = new Image(); 

    // Specify the source for the image 
var imgSource = "http://yourimage.com/example.jpg"; 

    // only append the corresponding LI after the image is loaded 
img[num].onload = function() { 
    $("#pic" + num).attr("style", "background-image:url('" + imgSource + "')"); 
}; 

img[num].src = imgSource;​ 

你將不得不爲每個LI有適當的CSS/ID等，你將不得不適應上述循環或功能你用來展示你的畫廊。

Here's a jsFiddle example。 （爲了測試的目的，這是一個很大的圖像，所以需要一段時間才能加載）。

Answer 2

好吧，我想你可能會讓事情太複雜。我不確定爲什麼當圖像可能在標籤內部時使用CSS背景。你說的原因是因爲你的圖像是動態創建的...我不明白這一點。

你可以做的就是創建一個返回的圖像的頁面，也許你可以使用一些參數...像圖像尺寸：

http://www.mysite.com/create_image.php?size=200x100&id=img1 

那麼所有你需要做的就是把這個網址裏img標籤的SRC ...如果你想，你可以在頁面加載時預加載圖片..或者當你的滑塊移動時

或者我可能沒理解你的問題= D

Answer 3

我從中使用的解決方案有兩層元素。

一層是以背景加載符號爲背景的情況。這總是被看見。然後在上面的第二層中，我將元素放置在圖像中，並使用.delay()和.fade()的jQuery .ready()函數。

因爲這是令人費解的講解，我會告訴我做什麼：

<!-- Page Elements --> 

    <div id="background-loading"> // Background image of spinner 
     <div id="slider-case"> // Container of slider 
     <ul id="slider-content"> 
      <li class="slider-image"></li> 
      <li class="slider-image"></li> 
      <li class="slider-image"></li> 
     </ul> 
     </div> 
    </div> 

    <!-- Script --> 

    // Somewhere you have a script that manages the slider 
    // Below is the loading animation/image manager 
    $(document).ready(function() { 
    $('#slider-content').delay(200).animate({opacity:1.0}, 'linear', function(){ 
     $('#background-loading').animate({opacity:0, 'margin-left':'-70px'}, 'linear'); 
     $('.slider-image').animate({opacity:1.0, 'margin-left':'0em'}, 'linear', function(){}); 
    }); 
    }); 

延遲和褪色，使加載時間似乎是故意的，而.ready()會等到該元素是完全加載。

通過具有單獨的背景圖層，您不必擔心除了滑塊之外的任何操作。要添加額外的效果，您可以對圖像加載進行回調，以減輕加載動畫的負擔。

Answer 4

它尋找具有src屬性或backgroundImage css屬性的元素，並在加載它們的圖像時調用動作函數。

/** 
* Load and wait for loading images. 
*/ 
function loadImages(images, action){ 
    var loaded_images = 0; 
    var bad_tags = 0;   

    $(images).each(function() { 
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display")); 
     var image = new Image(); 
     var src = $(this).attr("src"); 
     var backgroundImage = $(this).css("backgroundImage");    
     // Search for css background style 
     if(src == undefined && backgroundImage != "none"){ 
      var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;     
      src = pattern.exec(backgroundImage)[1];     
     }else{ 
      bad_tags++; 
     } 
     // Load images 
     $(image).load(function() { 
      loaded_images++;     
      if(loaded_images == ($(images).length - bad_tags)) 
       action(); 
     }) 
     .attr("src", src); 
    }); 
} 

Answer 5

你可以一個CSS技巧，而不是一些長的JavaScript代碼。
在這裏你可以做這樣的：

HTML：

<ul id="slideshow-container"> 
    <li><div id="image1"></div></li> 
    <li><div id="image2"></div></li> 
    <li><div id="image3"></div></li> 
    <li><div id="image4"></div></li> 
</ul> 

CSS：

#slideshow-container>li{ 
    background-image:url('loading.gif') 
} 

#slideshow-container>li>div{ 
    width:100%; 
    height:100%; 
} 

#slideshow-container>li>div{ 
    background-color:transparent; 
} 

#image1{ 
    background-image:url('image1.jpg'); 
} 

#image2{ 
    background-image:url('image2.jpg'); 
} 

#image3{ 
    background-image:url('image3.jpg'); 
} 

#image4{ 
    background-image:url('image4.jpg'); 
} 

說明：
幻燈片的圖像將成爲李的背景。 在加載圖像之前，背景將是透明的，它將顯示加載動畫的li的背景。
簡單來說，加載圖像的li將被顯示，直到載入div中包含的幻燈片圖像。