加載圖像元素

Question

喜 我與jQuery的頁面加載後裝上我的網站圖片，我使用$（文件）。就緒加載頁面加載後的圖像現在我想指定順序，所以我可以以某種方式加載我的幻燈片放映的圖像，並在幻燈片放映圖片加載顯示後隱藏我的幻燈片放映。

這是我的代碼的HTML部分：

<a class="videoThumb imageLightbox" href="images/slider/pic-usa-11-large.jpg"> 

        <img src="/images/blank.gif" class="delayLoad" onmouseover="this.src = './images/slider/pic-usa-11.jpg'" width=" 215px" height="160px"/> 
        </a> 

和我的文件準備好後裝入圖片：

$(document).ready(function() { 
// Load images once the page has loaded 
    jQuery("img.delayLoad").each(function() { 

     // Create a new span element which we will wrap around our image 
     // Using a span because if the image was inside an <a> tag then online inline elements should be used 
     var delaySpan = document.createElement("span"); 

     with (jQuery(this)) { 
      // Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly) 
      if (css('display') == 'none') { 
       var _display = 'none' } else { 
       var _display = 'block' } 

      // Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS) 
      var cssObj = { 
       'height' : css('height'), 
       'width' : css('width'), 
       'margin-top' : css('margin-top'), 
       'margin-right' : css('margin-right'), 
       'margin-bottom' : css('margin-bottom'), 
       'margin-left' : css('margin-left'), 
       'background-image' : css('background-image'), 
       'background-color' : css('background-color'), 
       'background-repeat' : css('background-repeat'), 
       // Hack for now, becuase IE doesn't seem to read the background-position property correctly 
       'background-position' : '50% 50%', 
       'display' : _display 
      } 
     } 

     // Apply our style properties to our span  
     jQuery(delaySpan).css(cssObj); 

     // Wrap the image in the span 
     jQuery(this).wrap(delaySpan) 

     // Hide the image (leaving just the span visible 
     .hide() 

     // Simulate the mouse over the image, whcih will cause it to switch the img src 
     .mouseover() 

     // Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover 
     .removeAttr("onmouseover") 

     // Simulate the mouse moving out of the image (To reset the image to its normal state) 
     .mouseout() 

     // Once the image is loaded, perform a function 
     .load(function() { 
      // Fade the image in 
      // Remove the span by unwrapping the image 
      jQuery(this).fadeIn().unwrap(); 
     }); 
    });  

}); 

（我用這個文件：http://www.purplepixelmedia.co.uk/Ourblog/tabid/78/articleType/ArticleView/articleId/80/Using-jQuery-to-loading-images-after-the-page-is-ready.aspx）

現在我想在加載所有圖像之前控制圖像加載並隱藏盒子並在加載頁面後顯示盒子

我該如何做這樣的工作？

感謝

Answer 1

的jQuery Message Queueing插件，您可以執行串行AJAX請求。這可能是你正在尋找的東西。