Question

喜我在使用jquery页面加载后在我的网站上加载图像，我使用$（文档）.ready在页面加载后加载图像现在我想指定顺序所以我可以以某种方式加载我的幻灯片图像并让我的幻灯片显示隐藏，幻灯片放映后加载显示它。

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

通过AJAX以首选顺序加载图像元素

1 个答案: