如何在页面加载时异步加载图像并在加载时显示加载gif？

这是我的图片标签。图像是从数据库动态生成的图形。涉及的数据量可能会有很大差异。有时它会在不到一秒的时间内加载，有时甚至可能会在6或7秒后才返回并显示图形图像。我想要做的是显示一个简单的占位符GIF，直到加载的实际图像。如何在页面加载时异步加载图像并在加载时显示加载gif？

<img src="@Url.Action("Graph", new { id = Model.ID })" alt="Graph is Loading..." />

来源

2013-11-14 TheColonel26

可能重复http://stackoverflow.com/questions/15826158/how-to-load-gif-image-while-ajax-content-is-loading-and- javascript？rq = 1 – Alex

http://stackoverflow.com/questions/16810423/show-spinning-wheel-image-till-the-full-page-loads?rq=1 – Alex

将src指向占位符并将url包含到图形中数据属性。接下来，在文档准备就绪的情况下，创建一个新的隐藏图像，给它一个隐藏占位符并显示自身的加载处理程序，然后将图像的src设置为图形。 –

完全不顾你的ASP，您可以用装载机作为源和数据属性的真实图像添加的元素，然后用JavaScript加载图像和交换图像一旦真实图像加载：

<img src="loader.gif" data-src="/images/menubar.png" />

JS预装

$('img').each(function() { 
    var self = this, 
     src = $(self).data('src'), // get the data attribute 
     img = new Image();   // create a new image 

    img.onload = function() {  // onload 
     self.src = this.src;  // swap the source 
    } 

    img.src = src;     // set source of new image 

    if (this.complete) $(this).load(); 
});

来源

2013-11-14 17:02:33 adeneo

这不会取决于服务器发送适当的缓存标题与图像？如果它是一个动态生成的图像，我希望src交换会导致数据库必须重新生成它，除非服务器设置为缓存结果。 –

@KevinB - 是的，必须启用适当的缓存，否则它只会再次生成图像，并且预加载不会真的有很大的好处。在我看来，如果这是个问题，服务器端应该发出正确的标题，但是黑客可能会使用两个图像标记，并切换图像的可见性onload，但隐藏的图像不会在大多数浏览器中加载，所以这个解决方案可能需要很多黑客才能工作。 – adeneo

你能告诉我如何用单个图像做到这一点吗？这是在页面上的所有图像上运行的权利？ – TheColonel26

如何在页面加载时异步加载图像并在加载时显示加载gif？

回答

相关问题