下载实际图像时如何显示加载图像 [英] How to display loading image while actual image is downloading

问题描述

有时，图像需要一些时间才能在浏览器中呈现.我要在下载实际图像时显示忙碌图像，并且在下载图像时，请删除忙碌图像并应显示实际图像.我该如何使用JQuery或任何javascript?

Sometimes images take some time to render in the browser. I want to show a busy image while the actual image is downloading, and when the image is downloaded, the busy image is removed and the actual image should be shown. How can I do this with JQuery or any javascript?

推荐答案

您可以执行以下操作:

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

您为图像分配load事件，该事件在图像加载完成时触发.在此之前，您可以显示加载程序图像.

You assign load event to the image which fires when image has finished loading. Before that, you can show your loader image.

这篇关于下载实际图像时如何显示加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！