当前位置:Gxlcms > JavaScript > jquery.lazyload实现图片延迟加载jquery插件_jquery

jquery.lazyload实现图片延迟加载jquery插件_jquery

时间:2021-07-01 10:21:17 帮助过:18人阅读

什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

怎么实现ImageLazyLoad

一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)


在线压缩js http://closure-compiler.appspot.com/home
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:

1.导入JS插件
输出时,html 代码为:

something

如果您是Jquery,Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供;

可查看http://www.appelsiini.net/projects/lazyload

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;

人气教程排行