图片懒加载
来源:互联网 发布:中超数据服务商 编辑:程序博客网 时间:2024/06/01 12:40
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>图片懒加载(可视区域加载)</title> <style> * { padding: 0px; margin: 0px; } html, body { width: 100%; min-height: 100%; } #SB { margin: 0; padding: 0; list-style: none; } #SB .in { border: 1px solid red; margin: 10px; text-align: center; height: 400px; width: 400px; float: left; } .in img { border: none; vertical-align: middle; height: 400px; width: 400px; } </style> </head> <body> <ul> <li class="in"><img src="" data-imgurl="img/1.jpg"></li> <li class="in"><img src="" data-imgurl="img/2.jpg"></li> <li class="in"><img src="" data-imgurl="img/3.jpg"></li> <li class="in"><img src="" data-imgurl="img/4.jpg"></li> <li class="in"><img src="" data-imgurl="img/5.jpg"></li> <li class="in"><img src="" data-imgurl="img/6.jpg"></li> <li class="in"><img src="" data-imgurl="img/7.jpg"></li> <li class="in"><img src="" data-imgurl="img/8.jpg"></li> <li class="in"><img src="" data-imgurl="img/9.jpg"></li> <li class="in"><img src="" data-imgurl="img/10.jpg"></li> <li class="in"><img src="" data-imgurl="img/11.jpg"></li> <li class="in"><img src="" data-imgurl="img/12.jpg"></li> <li class="in"><img src="" data-imgurl="img/13.jpg"></li> <li class="in"><img src="" data-imgurl="img/14.jpg"></li> <li class="in"><img src="" data-imgurl="img/15.jpg"></li> <li class="in"><img src="" data-imgurl="img/16.jpg"></li> <li class="in"><img src="" data-imgurl="img/1.jpg"></li> <li class="in"><img src="" data-imgurl="img/2.jpg"></li> <li class="in"><img src="" data-imgurl="img/3.jpg"></li> <li class="in"><img src="" data-imgurl="img/4.jpg"></li> <li class="in"><img src="" data-imgurl="img/5.jpg"></li> <li class="in"><img src="" data-imgurl="img/6.jpg"></li> <li class="in"><img src="" data-imgurl="img/7.jpg"></li> <li class="in"><img src="" data-imgurl="img/8.jpg"></li> <li class="in"><img src="" data-imgurl="img/9.jpg"></li> <li class="in"><img src="" data-imgurl="img/10.jpg"></li> <li class="in"><img src="" data-imgurl="img/11.jpg"></li> <li class="in"><img src="" data-imgurl="img/12.jpg"></li> <li class="in"><img src="" data-imgurl="img/13.jpg"></li> <li class="in"><img src="" data-imgurl="img/14.jpg"></li> <li class="in"><img src="" data-imgurl="img/15.jpg"></li> <li class="in"><img src="" data-imgurl="img/16.jpg"></li> <li class="in"><img src="" data-imgurl="img/1.jpg"></li> <li class="in"><img src="" data-imgurl="img/2.jpg"></li> <li class="in"><img src="" data-imgurl="img/3.jpg"></li> <li class="in"><img src="" data-imgurl="img/4.jpg"></li> <li class="in"><img src="" data-imgurl="img/5.jpg"></li> <li class="in"><img src="" data-imgurl="img/6.jpg"></li> <li class="in"><img src="" data-imgurl="img/7.jpg"></li> <li class="in"><img src="" data-imgurl="img/8.jpg"></li> <li class="in"><img src="" data-imgurl="img/9.jpg"></li> <li class="in"><img src="" data-imgurl="img/10.jpg"></li> <li class="in"><img src="" data-imgurl="img/11.jpg"></li> <li class="in"><img src="" data-imgurl="img/12.jpg"></li> <li class="in"><img src="" data-imgurl="img/13.jpg"></li> <li class="in"><img src="" data-imgurl="img/14.jpg"></li> <li class="in"><img src="" data-imgurl="img/15.jpg"></li> <li class="in"><img src="" data-imgurl="img/16.jpg"></li> </ul> <script type="text/javascript"> var aImages = document.getElementByTagName("ul").getElementsByTagName('img'); //所有的图片 loadImg(aImages); window.onscroll = function() { //滚动条滚动触发 loadImg(aImages); }; //getBoundingClientRect 是图片懒加载的核心 function loadImg(arr) { for(var i = 0, len = arr.length; i < len; i++) { if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) { arr[i].isLoad = true; //图片显示标志位 //arr[i].style.cssText = "opacity: 0;"; (function(i) { setTimeout(function() { if(arr[i].dataset) { //兼容不支持data的浏览器 aftLoadImg(arr[i], arr[i].dataset.imgurl); } else { aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl")); } arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein }, 500) })(i); } } } function aftLoadImg(obj, url) { var oImg = new Image(); oImg.onload = function() { obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象 } oImg.src = url; //oImg对象先下载该图像 } </script> </body> </html>
还可以使用jq的插件
jquery.lazyload.min.js
然后在页面上这样调用
$(function(){
$("img").lazyload();
})’
<img class="lazy" data-original="../images/index_01.jpg" alt="" />
将图片的src换成data-original就可以了
0 0
- 图片预加载与图片懒加载
- 图片预加载与图片懒加载
- 图片懒加载(图片延迟加载问题)
- 图片懒加载技术
- 图片懒加载
- 图片懒加载
- 图片懒加载,亲测
- 图片懒加载
- 图片懒加载
- 图片懒加载
- 图片懒加载
- js 图片懒加载
- 图片懒加载
- 图片懒加载
- 图片懒加载资料
- HTML图片懒加载
- 图片懒加载
- 图片懒加载
- eclipse3.6下webRoot目录设置说明
- ZooKeeper的安装与部署
- Hive实现从表中随机抽样得到一个不重复的数据样本
- 撸一个最简单的条件选择器picker(不联动)
- Unity MMO游戏架构设计之角色设计一
- 图片懒加载
- 【京东商城首页实战8】热词菜单
- php中关于mysqli和mysql区别的一些知识点分析
- 数据库根据时间后一条数据减去前一条数据的一种简单处理方式
- 计算机视觉需要更多几何洞察
- oracle-sql统计列m下的不重复列n的数目
- 一致性hash算法
- OpenGL--粒子系统
- HDU 2037 今年暑假不AC (结构体排序示例题)