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

Question

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

这是代码

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

Answer 1

您可以在 a 中显示您的图像，并通过 CSS 在其上div设置“加载” 。background-imagediv

HTML：

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

CSS：

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

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

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