PC端、移动端(手机端)图片懒加载方法整理
来源:互联网 发布:c 模拟退火算法 题目 编辑:程序博客网 时间:2024/06/05 09:34
1、PC端图片懒加载:
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置。
1.引入js文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
2.img标签
<img class = "lazy" src="images/placeholder.gif" data-original="images/example.png">
img标签的src指向一个图片占位符,这里推荐一个在线获取图片占位符的站点 > http://placehold.it/,真实图片路径必须写在data-original中。
3.调用lazyload
$("img.lazy").lazyload();
图片的占位符除了可以通过src属性来指定,也可以通过lazyload函数的参数来指定:
$("img.lazy").lazyload({ placeholder: "images/placeholder.gif"});
4.占位图片事件触发加载
如果我们希望滚到到图片的位置后,还要通过click或hover事件来唤醒图片的加载,我们可以指定lazyload函数的event属性:
$("img.lazy").lazyload({ placeholder: "images/placeholder.gif", event: "click"});
当图片完全加载的时候,插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果,如fadeIn:
$("img.lazy").lazyload({ effect: "fadeIn"})
5.提前加载图片
lazyload插件默认用户滚动到图片位置时才触发加载图片,如果我们希望滚动到距离图片一定位置就触发加载,可以指定lazyload函数的threshold参数:
$(“img.lazy”).lazyload({threshold: 200});
这样,当用户滚动到距离图片200像素时图片就开始加载了。
6.设置查找图片张数
lazyload的实现原理是,在页面滚动时,会搜索未加载的图片,如果图片在可视范围内就加载,默认情况下当找到第一张不在可见区域的图片时就会停止搜索。而搜索的顺序就是HTML文档中dom节点的定义顺序,所以如果有些图片定义在前面,但由于页面不好的布局图片将会呈现在后面,那么就会导致图片没办法正常显示。
此时我们可以通过lazyload函数的failure_limit参数:
$("img.lazy").lazyload({ failure_limit: 10});
这样一来,插件会搜索至少10个未加载的图片才停止搜索,如果你的图片布局比较不规则,可以尝试将这个参数调大。
下面这是一个demo 直接复制粘贴到sublime上就能查看了 比心♥ ♥
// 首先引入jQuery文件和懒加载文件 <script type="text/JavaScript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script><div><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"><img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg"></div><script type="text/javascript">$(function() {$("img.lazy").lazyload({ placeholder: "https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg", effect : "fadeIn"});});</script>
根据用户行为的预加载
http://www.zhangxinxu.com/wordpress/2016/06/image-preload-based-on-user-behavior/
这个文章有时间可以看看
2、Mobile移动端懒加载:
其实这个echo.js图片懒加载插件不仅适合移动端,而且在PC端同样适用,可谓兼容PC和Mobile的图片延迟加载插件!!!
<ul class="image_view1"> <li><a href="#"><img src="css/blank.gif" data-echo="images/2.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/3.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/4.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/5.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/6.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/7.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/8.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/9.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/10.jpg" /></a></li> <li><a href="#"><img src="css/blank.gif" data-echo="images/11.jpg" /></a></li></ul>
<script type="text/javascript"> //更多详细调用:https://github.com/toddmotto/echo echo.init();</script>
- PC端、移动端(手机端)图片懒加载方法整理
- 在PC上测试移动端网站和模拟手机浏览器的5大方法
- 在PC上测试移动端网站和模拟手机浏览器的5大方法
- 在PC上测试移动端网站和模拟手机浏览器的5大方法
- 在PC上测试移动端网站和模拟手机浏览器的5大方法
- 在PC上测试移动端网站和模拟手机浏览器的5大方法
- JS判断移动端、pc端、安卓、苹果浏览器等方法整理
- 图片懒加载(移动端)
- 【移动端】判断PC端还是手机端
- 移动端web--PC端网页在手机上查看
- 手机移动端WEB资源整合学习整理
- 手机移动端web前端常见问题整理
- 手机移动端web前端常见问题整理
- 手机移动端web前端常见问题整理
- PC上测试移动端网站和模拟手机浏览器
- 在PC或者手机端旋转、移动、缩放模型
- 移动端和PC端 H5开发 整理资料
- pc端和移动端顶部加载条
- iOS 基于Socket使用Protobuf进行数据传输
- 详解centos6和centos7防火墙的关闭
- 工具
- Android关于Edittext的inputtype属性详解
- JavaFx TableView表格
- PC端、移动端(手机端)图片懒加载方法整理
- Tomcat基础
- python3操作csv文件
- Xshell 上传和下载文件
- React Native之Android 和 iOS在点击触发事件时的兼容性处理
- 小翼机器人,如何使用百度语音,识别微信语音并与好友或在微信群内自动聊天
- 将Python和R整合进一个数据分析流程
- java向上转型和向下转型
- 我的小工具-远程读卡器web客户端(nodejs+websocket实现实时指令交互)