Question

我的项目中有以下HTML。

<div class="container" id="crop">
    <img id="timage" src="http://example.com/color/style/etc/" alt="timages" />

我还有以下javascript：

$(window).load(function () {
$("#slider").change(function update() {
    sVal = $(this).val();
    if (sVal == 2) {
            $('#timage').prop('src',"http://example.com/" +
            tForm +
            "color.blahblah" + 
            itemCode + 
            "therest_ofthe_URL");}

    sVal = $(this).val();
    if (sVal == 3) {
            $('#timage').prop('src',"http://example.com/" +
            tForm +
            "color.blahblah" + 
            itemCode + 
            "therest_ofthe_URL");}
            );}

当滑块值达到一定数量时，它可以很好地用字符串替换图像。问题是，图像是在幕后的后端创建的，并且在准备好之前需要相当长的时间。与此同时，你只是盯着原始图像，想知道滑块是否做了什么。

如何添加加载指示器让人们知道图像即将发生变化？

Answer 1

首先，在您想要的位置放置一个加载指示器。例如，您可以用旋转的gif替换#timage。然后使用此代码开始新的图像加载：

var img = new Image();
img.onload = function () {
    $('#timage').prop('src', img.src);
}
img.src = '/image/to/load/here';

当从服务器检索并加载新图像时，将执行该功能。由于它已经缓存在客户端上，因此一旦设置了#timage的src，它就会立即加载。

如何将加载指示符添加到<img/>？

1 个答案: