http://blog.sina.com.cn/s/blog_533587770101hefn.html

(2013-08-15 10:02:17)

转载▼

标签：

js懒加载图片

如何使用js懒加载图片

如何提高网页加载速度

js爱特效

怎么提高网页加载速度

分类：js

如何使用js懒加载图片

js懒加载图片简介：如何提高网页加载速度？在网页中有许多img标签，这些标签就是图片，其属性src则是指向服务器地址，当浏览器从上往下读取到src标签中的地址时，浏览器就会开启线程，加载这张图片。而并不是等到整张页面都解析完成才加载图片。我们要做的就是，1.不能让浏览器加载到大图片，2.加载用户可视范围内的图片。

懒加载图片工具：使用jquery.lazyload.js的机制

http://www.appelsiini.net/projects/lazyload

js懒加载图片的目的：1.网页优化，提高网页加载速度

2.页面优化友好，提高SEO收录与排名

3.提高用户体验，减少服务器压力

爱特效技术支持：www.lyoxh.com

1.使用js懒加载图片的原理介绍

下面是浏览器并发加载的过程图：

我们很轻易得出结论:

1.浏览器会从上往下加载文件(从先加载的js与css看出，这很明显是head里边的链接地址，对吧)。

2.浏览器会并发加载一定数量的文件(火狐默认可同时加载100个)。

2.如何进行js懒加载图片

1.网页中的图片，都设为同一张图片。 //有没有感觉到很可笑？

2.给图片增加 data-original="img/example.jpg" 的属性，保存这张图片的真实地址。

3.当滚动条到达用户可视区域后，插件自动改变该区域的图片的src属性为我们缓存的地址。

4.浏览器加载可视区域图。

3.使用js懒加载图片的效果展示

优化后，百度站长测试结果图：

注：图片使用越多，加载次数越多，速度越慢，导致网页评分过低的几率也会更大。

4.如何使用js懒加载图片

a.懒加载图片是基于jquery.js的，所以：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

b. 需要懒加载的图片，①.增加data-original="图片真实地址"

②.页面所有的img标签的src属性指向同一个图片(图片未加载时，显示的一张临时图)

③.图片一定要设置 width 与 height //为什么？请阅读网页优化相关文章…无语...

注意：这点你可能没办法接受，因为需要改变你的html

src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

c.把需要懒加载的图片，选中，然后调用插件函数就ok了！

$("img.lazy").lazyload();

这是示例效果：http://www.appelsiini.net/projects/lazyload/enabled.html

5.使用优点分析

a.提高网页加载速度，直接影响收录与排名。

--在蜘蛛抓去的时候，爬行你的网页会非常快速，以至于页面优化值得到最大提升。

b. 减少请求，降低服务器压力。

--只有当用户滚动到可视范围内才加载图片，你说是不是下载次数减少了？

6.使用缺点分析

a. 图片不会被收录

--蜘蛛会收录图片到，自己服务器的图片库中。但因为我们的静态页面的图片都指向一张，所以图片不会被蜘蛛收录。

b. 页面又要引入一个 js

--我们开发者更希望简单，而不是引入一堆东西，因为很少人去关注源码，很怕会出问题。

如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度相关推荐

js+php在线截图 jquery fileupload.js,另一种图片上传 jquery.fileupload.js
今天遇到另外一种上传图片方法用jquery.fileupload.js 一个文件类型的元素 $("#fileupload").fileupload({ datatype:&quo ...
jQuery图片延迟加载插件jQuery.lazyload
查看演示 website 立即下载插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方 ...
magento effects.js jquery.lazyload.js 冲突
2019独角兽企业重金招聘Python工程师标准>>> 当这两个js并存时,会造成加载图片闪烁的冲突问题原因: jquery.lazyload.js会触发叫"appear ...
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了 ...
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
前端性能优化——如何提高页面加载速度？
1.将样式表放在头部首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止"白屏". 我们 ...
jquery.lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
按需加载图片、html代码、js代码，前端页面性能优化
加载一个比较长的页面,或者图片比较多的页面,如果把资源一次性全部加载,在网络不是很好的情况下可能造成页面留白现象,用户体验极差! 因此呢,我们可以把用户暂时不会看到或用到的资源先不加载,在某个条件下, ...
WEB前端性能优化，提高页面加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...
网页优化之WebView预加载
前言现在许多app都嵌入了H5页面,H5具有开发周期短.灵活性好的特点.但是WebView的性能问题却一直影响着用户体验.特别突出的就是加载速度慢和消耗流量. 在项目中,我做了一个测试,加载一个默认 ...

如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度

js懒加载图片

如何使用js懒加载图片

如何提高网页加载速度

js爱特效

怎么提高网页加载速度

如何使用js懒加载图片

如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度相关推荐

最新文章

热门文章