Question

我有一个包含许多大图像的网站，我想延迟加载，直到加载了较小的UI图形。我用过这样的HTML：

 <span id="img0" class="preload" data-src="/images/tomato.jpg"></span>
 <span id="img1" class="preload" data-src="/images/squash.jpg"></span>

我认为我可以收集所有类“preload”的实例，然后按ID排序，然后添加调用图像的html。

问题是它每次只加载相同的图像。

以下是小提琴：http://jsfiddle.net/nUFUW/

ANSWER :(如上所述）。要按照ID的顺序加载图像，并且还有要验证的html：

jQuery(document).ready(function($) {

    $(".preload").each(loadImages);

        function loadImages (i, elem) {

            var numItems = $('.preload').length;
            for (var i = 0; i < numItems; i++) {

                $("#img" + i).each(function(){
                    var thisSource = $(this).data('src');
                    $(this).html('<img src="' + thisSource + '" alt=""/>');
                });
            }

    } //<end loadImages function>

});

请注意，页面中未使用Span标记替换的任何图像都将在Spans标记之前加载。我猜这是因为它在“文件就绪”之前发生了所有事情。因此没有必要在UI中标记每个图像，只有大图像。现在我的大图像加载最后，这就是我喜欢它。：）< / p>

Answer 1

应该是这样的：

jQuery(window).load(function($) {

    function loadImage(i){
        if($("#img" + i).size() == 0)
            return;
        $("#img" + i).load(function(){
            loadImage(i + 1);
        });
        $("#img" + i).attr('src', $("#img" + i).data("src"));
    }
    loadImage(0);

});

Jquery图像加载顺序

1 个答案: