【原创】ImagesLazyLoad 图片延迟加载效果

cloudgamer 2010-03-08 09:31:36
加精
之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。
现在很多网站都用了类似的效果，如淘宝、Bing等。
这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src和图片加载的部分。

兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
其中safari和chrome部分功能不支持。

前台效果预览



完整实例下载

...全文
2590 110 打赏 收藏 转发到动态 举报
写回复
用AI写文章
110 条回复
切换为时间正序
请发表友善的回复…
发表回复
xiwangzhiguang88608 2010-06-12
  • 打赏
  • 举报
 回复
顶一下
cloudgamer 2010-06-12
  • 打赏
  • 举报
 回复
谢谢支持
antony1029 2010-05-24
  • 打赏
  • 举报
 回复
jf!!!!!!!!
fbia1232000 2010-05-24
  • 打赏
  • 举报
 回复
fffffffffffffff
cloudgamer 2010-05-24
  • 打赏
  • 举报
 回复
顶一下
cloudgamer 2010-05-10
  • 打赏
  • 举报
 回复
谢谢支持
chenzhaohui555 2010-05-10
  • 打赏
  • 举报
 回复
受教了，支持
liumangdaheng 2010-04-29
  • 打赏
  • 举报
 回复
支持一个，这个不错

dinglongfei 2010-04-29
  • 打赏
  • 举报
 回复
占个位置，学习学习！！顶
后浪 2010-04-28
  • 打赏
  • 举报
 回复
收藏！
cloudgamer 2010-04-28
  • 打赏
  • 举报
 回复
顶一下
程序园苑 2010-04-14
  • 打赏
  • 举报
 回复
牛人，学习啊
cloudgamer 2010-04-13
  • 打赏
  • 举报
 回复
谢谢支持
cust28 2010-04-12
  • 打赏
  • 举报
 回复
学习了
liweiding 2010-04-11
  • 打赏
  • 举报
 回复
很不错，收藏了。
billle 2010-04-09
  • 打赏
  • 举报
 回复
强。。。。。
lovebin_bin 2010-04-09
  • 打赏
  • 举报
 回复
不错 顶一个
jiangseraph 2010-04-09
  • 打赏
  • 举报
 回复
学习一下
pilicat 2010-04-08
  • 打赏
  • 举报
 回复
学习，受教了！
bzhyan 2010-04-07
  • 打赏
  • 举报
 回复
强烈支持！！！！！！！！！！！
加载更多回复（85）
CJL.js:Cloudgamer JavaScript 库
Cloudgamer JavaScript Library Author: Project in Chinese Animations [AlertBox 弹出层（信息提示框）效果] () [JavaScript 图片3D展示空间（3DRoom）] () [图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)] () [SlideView 图片滑动（扩展/收缩）展示效果] () [ImageZoom 图片放大效果] () [ImageZoom 图片放大效果（扩展篇）] () [ImagesLazyLoad 图片延迟加载效果] () [Lazyload 延迟加载效果] () [JavaScript 图片上传预览效果] () [简便无刷新文件上传系统] () Read
jquery image lazy load
jquery image lazy load
ImageZoom 图片放大镜效果（多功能扩展篇）
主要扩展了原图和显示框的展示模式，有以下几种模式： “follow” 跟随模式：显示框能跟随鼠标移动的效果； “handle” 拖柄模式：原图上有一个拖柄来标记显示范围； “cropper” 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示； “handle-cropper” 拖柄切割模式：拖柄模式和切割模式的混合版，同时用透明度和拖柄来标记显示范围。 当然更多的扩展等待你的想象力来发掘。 兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1 程序说明 【扩展模式】 上次ImagesLazyLoad使用了继
ImagesLazyLoad 图片延迟加载效果
ImagesLazyLoad 图片延迟加载效果 之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。 现在很多网站都用了类似的效果，如淘宝、Bing等。 这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src...
ImagesLazyload图片延迟加载效果
转自：http://www.cnblogs.com/cloudgamer/archive/2010/03/03/ImagesLazyLoad.html 之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。 现在很多网站都用了类似的效果，如淘宝、Bing等
JavaScript

87,924

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章