ASP.NET MVC - 如何异步加载图像？ [英] ASP.NET MVC - How do I load an image asynchronously?

问题描述

在我的网站首页我想显示了很多具有这是相当大的图像产品。目前，该页面要花这么长时间来加载，它实际上是超时和页面无法显示！

在MVC，或者只是ASP.NET总的来说，我怎么可以异步加载图像？基本上我想要做的是显示产品的详细信息，只显示一个小加载图片例如 ajaxload.info 。直到图像被加载。

我认为这将需要一些JavaScript / jQuery的...

解决方案

 ＆LT; IMG SRC =Ajax的loader.gif的onload =this.onload = NULL; this.src ='bigimage.png'; /＆GT;
 

或者如果你preFER不显眼：

 ＆LT; IMG SRC =Ajax的loader.gifID =myimg/＆GT;
 

和则：

  $（函数（）{
    $（'＃myimg'）。负载（函数（）{
        $（本）.unbind（'负荷'）;
        this.src ='bigimage.png';
    }）;
}）;
 

On the home page of my site I want to display a lot of products which have images which are quite large. Currently the page is taking so long to load that it is actually timing out and the page fails to display!

In MVC, or just ASP.NET in general, how can I load an image asynchronously? Basically what I want to do is display the details of the product and just display a small loading image e.g. ajaxload.info. until the image is loaded.

I assume this is going to require some javascript/jQuery...

解决方案

<img src="ajax-loader.gif" onload="this.onload=null;this.src='bigimage.png';" />

or if you prefer unobtrusively:

<img src="ajax-loader.gif" id="myimg" />

and then:

$(function() {
    $('#myimg').load(function() {
        $(this).unbind('load');
        this.src = 'bigimage.png';
    });
});

这篇关于ASP.NET MVC - 如何异步加载图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！