javascript - jQuery 加载不同质量级别的图像

Question

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

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

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

我需要一些 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 但它只是跳到大的。

第二次更新

我还发现，在加载所有图像后，我需要取消绑定(bind)加载函数，否则它将陷入无限循环。希望如果可以解决这个问题，就可以以不会引入任何无限循环的方式完成。

关于如何整理它有什么想法吗？

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