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

how to show loading while changing image's source

本文关键字：显示 加载 图像      更新时间：2023-09-26

我在javascript数组中有图像，我在上一个和下一个按钮单击时更改了它，但是更改源后需要一些时间，我想在更改源完成时显示加载

这是代码 

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

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

.HTML：

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

.CSS：

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

加载your-loading-image.png后，只要图像的src更改为浏览器尚未加载的图像，它就会可见。

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

相关文章：