jquery之图片懒加载（总结）

2019独角兽企业重金招聘Python工程师标准>>>

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

懒加载使用：

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>

转载于:https://my.oschina.net/u/3042303/blog/850140

jquery之图片懒加载（总结）相关推荐

使用jQuery实现图片懒加载原理
在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下 ...
Java对图片懒加载_[Java教程]JQuery实现图片懒加载_星空网
JQuery实现图片懒加载 2018-08-16 0 懒加载的原因: 对于图片过多的场景,为了提高页面的加载速度,降低服务器的负载,增强用户体验,我们对还没出现在视野的图片先不加载,当元素出现在我们视 ...
jquery实现图片懒加载
实现一个懒加载,效果如上所示 HTML <!DOCTYPE html> <html lang="en"><head><meta chars ...
基于jquery的图片懒加载js
在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载. 以下是实现代码(基于jquery): function lazyload(option){var sett ...
前端学习（1033）:jquery插件-图片懒加载
1下载插件 2html css和js引入 ctrl+h 快速替换必须最后插入
图片太多加载过慢？学学图片懒加载吧
实验介绍我们在浏览图片较多的网页时,有没有想过这些图片是如何成功展示的呢?比如像这样的图片素材网站: 这样的网页拥有成千上万的图片资源,如何优化网页性能成为了开发人员不得不思考的技术问题. 不难发现 ...
jQuery图片懒加载示例（滚动函数再加载）
图片懒加载可以极大的减轻服务器请求的负担,如果没有做这样的操作,一个页面很多图片同时请求,就会渲染慢,影响用户体验! 原理其实很简单,就是滚动条拉下来显示的时候再加载显示出真实的图片,在不显示的区域的 ...
JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
Jquery图片懒加载和预加载
Jquery图片懒加载和预加载懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...

jquery之图片懒加载（总结）

jquery之图片懒加载（总结）相关推荐

最新文章

热门文章