Question

我正在网站上显示大量图片。

我的每张图片都有不同的质量水平。我有拇指（~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');

       });
    });
});

但这太可怕了。我已经尝试将网址放在一个数组中并执行$.each，但它只是跳到了较大的位置。

第二次更新

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

关于如何解决这个问题的任何想法？

Answer 1

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>

编辑：我有自己的尝试here已经改进了here

jQuery以不同的质量水平加载图像

1 个答案: