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

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

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

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

从服务器检索并加载新图像后，将执行该函数。由于它已经缓存在客户端上，一旦设置了#timage 的 src，它应该会立即加载。

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

How do I add loading indicator to an <img>?

html

javascript

jquery

loading

gif