QQ 1640076782

2014年11月28日

jQuery实现图片延迟加载

Filed under: 英语网站设计 — 标签:, — limeng @ 7:14 上午

对于专门的图片网站或是素材网站,一个页面可能会有很多图片,这个当用户打开网站时,图片会加载的十分慢,用户体验也会很差。jQuery实现图片延迟加载原理就是先加载一屏内的图片,当拉旁边的滚动条时,再依次加载下面的图片,这样就避免了用户需要等所有图片加载完,再浏览。

jQuery实现图片延迟加载方法一

<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(

“images/1.jpg”

“images/2.jpg”

“images/3.jpg”

)
//--><!]]>
</script>
这种方法虽然简单,但是需要有多少图片就写多少次或者是图片名称有规律性递增,太麻烦了,只适用于少量图片的情况。
jQuery实现图片延迟加载方法二
之所以图片会用_lazysrc,其实也是避免了其他不需要预加载的图片,且用正常的src,对谷歌等浏览器会有漏洞,一般不建议。
这个方法适用于图片很多,且图片名称无规律。