jQuery.lazyload懒加载

注意事项：jquery.js务必先引进，然后才加载lazyload；img长宽一定要有，每幅长宽可以不一致；在js段，可以不用$(window).ready来加载事件；

1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片（img.lazy），执行lazyload();

//注意js引入的先后顺序
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
<img class="lazy" data-original="img/example.jpg" width="1330" height="900">
<img class="lazy" data-original="img/example.jpg" width="400"height="200"> //可以尺寸不一致
...//无数张你想要加载的照片
<script>
//开始全局加载
$(function(){ $("img.lazy").lazyload({effect: "fadeIn"});})
</script>

lazyload配置参数

$("img.lazy").lazyload({placeholder : "img/grey.gif", //用图片提前占位// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏effect: "fadeIn", // 载入使用何种效果// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeInthreshold: 200, // 提前开始加载// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉event: 'click',  // 事件触发时才加载// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…container: $("#container"),  // 对某容器中的图片实现效果// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片failurelimit : 10 // 图片排序混乱时// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

参考地址

http://www.jq22.com/jquery-info390

http://www.cnblogs.com/wold/p/7718610.html

jQuery.lazyload懒加载相关推荐

jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载...
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
Jquery图片懒加载和预加载
Jquery图片懒加载和预加载懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
php ajax 懒加载demo,lazyload懒加载，怎么支持ajax获得的新内容？
lazyload懒加载,怎么支持ajax获得的新内容? 现在问题是: 1.老的内容已经$("img.lazy").lazyload({effect: "fadeIn&qu ...
jquery的懒加载记录一下踩得坑
官网下载地址:http://plugins.jquery.com/lazyload/ 要引入两个文件,注意这些事html中包含着 <script src="https://code.j ...
jQuery图片懒加载示例（滚动函数再加载）
图片懒加载可以极大的减轻服务器请求的负担,如果没有做这样的操作,一个页面很多图片同时请求,就会渲染慢,影响用户体验! 原理其实很简单,就是滚动条拉下来显示的时候再加载显示出真实的图片,在不显示的区域的 ...
jQuery 插件—— 懒加载
何为懒加载? 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资 ...
Concis组件库封装——LazyLoad懒加载
懒加载组件,支持任意元素进行延迟加载,可以在SPA单页应用首页渲染时减少非可视区的DOM渲染,加快首屏渲染效率,大致用法: <LazyLoad><div><span> ...
jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~
我高小莫,今天在这里发誓,如果以后能不用jQuery 的我绝不再用,做习惯了前后端分离的项目,再次回到jQuery ,发现异常的恶心~~~~· 不怪谁,怪就怪当初我,选择项目架构的时候为了省力,竟然选 ...

jQuery.lazyload懒加载

jQuery.lazyload懒加载相关推荐

最新文章

热门文章