0

我在网站上显示了大量图像。

我有不同质量级别的每张图像。我有拇指（~10kb）、小（~200kb）、中（~1.2mb）和大（~2.5mb）。我想要的是显示拇指图像，然后让javascript加载小的并在加载时替换它，然后加载介质并替换它等等。这样一来，图像会立即弹出，并且质量会越来越好。

图像显示为 div 的背景，大小设置为包含，因此它将拉伸较小的图像以填充空间。

我只需要一些 jQuery 来加载图像并在加载时替换背景。

更新

这就是我解决它的方法。我创建了隐藏的 img 元素，它加载每个图像，然后在完成后显示。但我不会拒绝一些帮助清理它的人。

html只是

<img id="image_loader" style="display:none;" />

jQuery是

$("#image_loader").attr("src", SmallURL);
$("#image_loader").load(function() {

    $("#image_container").css("background-image", 'url('+SmallURL+')');

    $("#image_loader").attr("src", MedURL);
    $("#image_loader").load(function() {

       $("#image_container").css("background-image", 'url('+MedURL+')');

       $("#image_loader").attr("src", LargeURL);
       $("#image_loader").load(function() {

           $("#image_container").css("background-image", 'url('+LargeURL+')');
           $("#image_loader").unbind('load');

       });
    });
});

但这非常混乱。我尝试将 URL 放在一个数组中并做一个$.each，但它只是跳到大。

第二次更新

我还发现，一旦加载了所有图像，我就需要取消绑定加载函数，否则它会陷入无限循环。希望如果可以清理它，它可以以一种不会引入任何无限循环的方式完成。

关于如何整理它的任何想法？

4

1 回答 1

2

JQuery API可能是一个很好的起点，如果您还没有检查过的话。

您正在尝试做的事情听起来像是您想要以每个质量级别加载多个图像，所以像......

<img src="image_low.jpg" class="low"/>
<img src="image_med.jpg" class="med" style="display:none;"/>
<img src="image_high.jpg" class="high" style="display:none;"/>

<script>
    $('.low').load(function() {
        $(this).attr("src", $('.med').attr('src'));
    });

    $('.med').load(function() {
        $(this).attr("src", $('.high').attr('src'));
    });
</script>

编辑：我在这里进行了自己的尝试，在这里得到了改进

于 2012-10-03T12:26:11.893 回答