Jquery动态加载图片

工作中有的时候遇到图片加载过慢，这样会出现网站打开，但是图片为空的情况，给用户很不好的体验度。在这个时候，我们就会加载一个很小的图片显示通常是1px * 1px，然后用jquery技术将这个图片替换显示正确图片，用户体验度增加。在这个方面我觉得jquery.scrollLoading.js做的不错。

 

 

scrollLoading使用不管怎样，首先调用jQuery库文件，还有jquery.scrollLoading.js，您可以直接在页面的某处添上如下的代码：

 

 

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>

<script type=”text/javascript” src=”http://www.wutongxia.com/web/example/js/jquery.scrollLoading-min.js”></script>

 

此插件的方法名就是scrollLoading，所以，直接：包装器.scrollLoading();就可以实现滚动加载效果了，简单的吧。如下：

 

$(“.scrollLoading”).scrollLoading();

 

表示所有class为scrollLoading的元素绑定了滚动加载的方法。

当然，不可能真的就如此简单，我们还需要做点小动作的。元素默认是不加载的，那么真正的加载地址显然要预先在元素上放置的，例如新浪微博默认把头像地址绑在了一个自定义的”dynamic-src”属性上，见下图：

在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为”data-url”，此属性值设为真实的图片（或页面）地址就可以了。例如下面：

 <div class=”scrollLoading” data-url=”loaded.html”>加载中…</div>

 

 

会在滚动时加载名为loaded.html的页面，并自动替换里面的内容。

对于常用的图片，还有一点小问题，就是其默认的src图片地址。其src地址不能是真实的图片地址（否则会直接一次性全部加载），也不能是空地址或是坏地址，否则IE浏览器下会出现很惊悚的红叉叉。。我的做法是默认链接的是一个1px * 1px的gif透明图片（大小很小），同时可以透出后面加载中gif动画图片，当滚动加载的时候直接把此gif图片替换掉。于是，对于图片，可能就有类似下面的代码：

<img class=”scrollLoading” data-url=”http://www.wutongxia.com/web/example/images/1.jpeg” src=”http://www.wutongxia.com/web/example/images/pixel.gif” width=”180″ height=”180″ style=”background:url(http://www.wutongxia.com/web/example/images/loading.gif) no-repeat center;” />

 

Jquery动态加载图片的Demo ：

 

http://www.zhangxinxu.com/study/201011/page-scroll-loading.html

 

js文件在我的下载资源中，需要的可以去下载