2

我有一个包含许多大图像的站点，我想将它们的加载延迟到加载较小的 UI 图形之后。我像这样使用html：

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

我认为我可以收集“预加载”类的所有实例，然后按 ID 对它们进行排序，然后添加调用图像的 html。

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

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

答案：（如上的HTML）。要按其 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 标签替换的任何图像都将在 Span 之前加载。我想那是因为这一切都发生在“文档准备就绪”触发之前。因此没有必要在 UI 中标记每个图像，只需要标记大图像。现在我的大图像最后加载，这就是我喜欢的方式。:)

4

1 回答 1

0

它应该是这样的：

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);

});

​ ​</p>

于 2012-11-09T03:48:39.127 回答