文档章节

jquery之图片懒加载(总结)

 当当当当蛋糕
发布于 2017/03/03 10:36
字数 355
阅读 7
收藏 0

  在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

懒加载使用:

1.先在页面引入jquery.js 和lazyload.js(注意引入顺序)

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
2.先给需要懒加载的图片添加类名, 例如class=“lazy”;图片地址必须放在data-original属性上,不必写src属性,进行图像插件捆绑。代码如下:

1
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
3.最后调用执行lazyload()函数;

1
2
3
<script type="text/javascript">
    $("img.lazy").lazyload(); 
</script>
可以设置懒加载的触发事件:

     懒加载默认的是,srcoll事件触发,页面滚动的时候,当图片出现在视野中时加载,不滚动不加载;有时候我们需要当页面加载完成时,不用滚动,立即执行加载显示图片,这时候我们就可以给懒加载绑定“sporty”事件,代码如下:

1
2
3
4
5
6
7
8
9
$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});
<a href="www.wfqcp.com/" class="lightblue">潍坊长途汽车站</a> 
 
$(window).bind("load", function() {
    var timeout = setTimeout(function(){$("img.lazy").trigger("sporty")},2000);//2秒后自动加载图片
});   <em id="__mceDel" style="background-color: #ffffff; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px">  </em>

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 38
码字总数 13194
作品 0
南京
私信 提问
前端开发者值得一看的 8 款实用 jQuery 插件

作为多年的WEB前端开发者来说,我用过非常多的jQuery插件,不是我懒,的确是因为jQuery插件使用太方便了,大大减少了我的工作时间。本文是我使用过的几款非常出色的jQuery插件,我想很有必要...

yykj
2012/11/20
11K
14
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0
Hikic.js 紧急发布1.1-2版本,修复懒加载的3个BUG

Hikic.js是一款类似JQuery但是又优于JQuery的高性能JS库。 同样是3月9号,在Hikic.js刚刚发布1.1版本更新才过去了几个小时,Hikic.js就紧急发布了1.1-2版本以修复刚添加到1.1版本里面的懒加载...

Skyogo
2018/03/09
530
11
Hikic 迎来 1.1 更新,懒加载助力网页性能提升

Hikic.js是一款类似JQuery但是有优于JQuery的高性能JS库。 在3月9号,Hikic迎来首次更新,现在就让我们来看看1.1新增了哪些功能: show方法-显示元素 hide方法-隐藏元素 lazyLoad方法-设置懒...

Skyogo
2018/03/09
999
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
40分钟前
0
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
9
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
4
0
今天的学习

1,document.location.href:获取整个url 2,str.split(' '):用字符分割字符串 3,$this->load->library(' '):引用图像处理类 4,$this->load->library(' '):引用Email类 5,特殊访问指针$th......

墨冥
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部