如何在更改图像源时显示加载

Question

我在javascript数组中有图像我在上一次和下一次按钮点击时更改了这一点但在更改源后需要一些时间我想显示加载而更改源是完整的

这里是代码

`imgsrc = url + "Convension/images/" + arrImages[i].CategoryName + "/mOver/" + arrImages[i].Name;
                    $("#Imgconvention").attr('src', imgsrc);`

Answer 1

您可以在div内显示图片，并通过background-image上的CSS设置“加载”div。

HTML：

<div class="imageContainer"><img id="Imgconvention" src="" / ></div>

CSS：

.imageContainer
{
    background-image: url(your-loading-image.png);
}

加载your-loading-image.png后，只要您的图片的src更改为浏览器尚未加载的图片，该图片就会显示。

另一种方法是使用JavaScript预加载图像。这可以消除用户的延迟（尽管如果有很多和/或它们很大，你可能只想预先加载上一个/下一个图像。