懒加载，预加载的对比与实现

一、懒加载

1.概念：

访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。

2.优点：

页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。

3.步骤：

页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。

1）懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素“data-url”属性里。

2）页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-url的值取出来存放到src中。

3）在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。

4.demo：

5. 插件

成熟的懒加载插件，直接调用方法即可。 jquery.lazyload.js压缩版：jquery.lazyload.js

jquery.lazyload.js正常版：jquery.lazyload.js

如何使用

Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是

前:

你必须改变图片的标签。图像的地址必须放在

data-original

属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。代码如下：

$(function() { $("img.lazy").lazyload();});

这将使所有 class 为

lazy

的图片将被延迟加载.Demo:基本选项

TIPS:这里必须设置图片的

width

和

height

,否则插件可能无法正常工作。

设置临界点

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置

threshold

选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

$("img.lazy").lazyload({ threshold : 200});

设置事件来触发加载

你可以使用jQuery事件，例如

click

和

mouseover

。也可以使用自定义事件，如

sporty

、

foobar

默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片：

$("img.lazy").lazyload({ event : "click"});

Demo:经过五秒钟的延迟后加载图片

使用特效

默认情况下，插件等待图像完全加载并调用

show()

。你可以使用任何你想要的效果。下面的代码使用

fadeIn

（淡入效果）。Demo:淡入效果

$("img.lazy").lazyload({ effect : "fadeIn"});

针对不启用JavaScript的情况

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写

标签内.

可以通过 CSS 隐藏占位符.

.lazy { display: none;}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

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

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.Demo:容器内水平滚动, 容器内垂直滚动

当图像不连续时

滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过

failurelimit

选项来控制加载行为.

$("img.lazy").lazyload({ failure_limit : 10});

将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.

加载隐藏的图片

可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将

skip_invisible

设为

false

$("img.lazy").lazyload({ skip_invisible : false});

二、预加载

1.概念：

提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2.优点：

图片预先加载到浏览器中，这对图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时操作得到最快的反映。

3.实现方式

实现预载的方法非常多，比如：用CSS和JavaScript实现预加载；仅使用JavaScript实现预加载；使用Ajax实现预加载。

4.js预加载demo:

常用方法new Image()，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小。

//要预加载的图片路径

三、预加载与懒加载对比

1.概念：

懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2.区别：两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓加载甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。