加载图像元素

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请求。这可能是你正在寻找的东西。