图片预加载与图片懒加载

 

图片预加载与图片懒加载

图片预加载

图片预加载主要是针对非icon类图片。

加载快，有良好的用户体验。

提前加载图片，当用户需要查看时可直接从本地缓存中渲染、可能因为图片很大，浏览器显示出它会用很长的时间，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载，让浏览区先显示其他的图片（一般使用LOGO）给浏览者看，等图片加载完了之后，再将图片显示。

预加载的意义：预加载可以说是牺牲服务的前段性能，换取更好的用户体验，这样可以使用户的操作得到更快的用户体验。

 

实现预载的方法

实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML()都可以。常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(可以用计时器轮循宽高变化)。一般实现预载的工具类，都实现一个Array来存需要预载的URL，然后实现Finish、Error、SizeChange等常用事件，可以由用户选择是顺序预载或假并发预载。

 

扩展到非图片

扩展的非图片，主要以DIV为例。一种实现设计模式：我们给需要缓载的DIV加上一个代理类，这样一旦触发其加载事件则会自动的调用代理类进行更新数据。然后将这些需要加载的DIV放入一个集合，计算他们的滚动量，同时设置一个偏移量，然后设置其监视浏览器滚动条，以实现动态缓载

 

图片懒加载

懒加载（有名缓载），延迟加载图片或符合某些条件时才加载某些图片

懒加载的意义：主要目的是作为服务器前段的优化，减少请求或延迟请求的次数。

呈现懒加载的三种形式：

①.纯粹的延时加载，使用setTimeout或者setInterval进行加载延迟，如果用户在加载前就离开了，那么自然就不会进行加载。

②.第二种就是条件加载，符合某些条件，或者触发了某些事件才开始异步加载。

③.第三种就是可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般据用户看到的底边很近的时候开始加载，这样能保证用户下拉的时候图片正好接上，不会有太长时间的停顿。

使用优点分析

a. 提高网页加载速度，直接影响收录与排名--在蜘蛛抓去的时候，爬行网页会非常快速，以至于页面优化值得到最大提升。

b. 减少请求，降低服务器压力。--只有当用户滚动到可视范围内才加载图片，下载次数减少

 

如何使用js懒加载图片

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

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

 

js懒加载图片的基本步骤

1.网页中的图片，都设为同一张图片。

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

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

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

注意：

1.增加 data-original="图片真实地址"

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

3.图片一定要设置 width 与 height 

 

 

之后可以直接用插件处理$("img.lazy").lazyload(); 当然，也可以自己进行DOM的书写（也不难）