网页图片延迟加载(lazyload)技术

分类:JavaScript
 标签:JavaScript,lazyload,延迟加载,JQuery
   修改 | 阅读(837)| 评论(0)
图片延迟加载技术目前已经被各种网站广泛的使用,为什么要使用背景图延迟加载技术?下面我们就来说一说这个问题。
之所以使用图片延迟加载技术,是为了避免浪费带宽。有些页面上嵌入了很多图片,但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时,正常情况下,这30多种图片会全部一次性从服务器加载到客户端,就造成的服务器的压力,也给用户的浏览器造成压力,而且,也许用户之看了前几张图片就退出去了,那其它图片的加载就是浪费。
而使用图片延迟加载技术时,随着用户向下滚动页面,只有当图片滚动到可视视窗内,或接近可视视窗时,这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。

目前最流行的图片延迟加载技术是使用Lazy Load Plugin for jQuery,它是一个非常轻量级的jQuery插件,只有2k多的体积。使用方法也非常简单,只需要在图片上这样写:

<img class="lazy lazy " data-original="img/example.jpg" width="640" height="480">

然后用一段js

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

这样,这个图片就会只有当需要加载时才会加载。
大多数人使用Lazy Load Plugin for jQuery,是用于image加载,但其实它还有一个很重要的功能,就是背景图延迟加载。背景图延迟加载的用法和图片延时加载的用法很相似,首先,你需要使用背景的元素需要这样写:

<div class="lazy lazy " data-original="img/example.jpg" width="640" height="480"></div>

然后用一段js

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

这样,只有当这个div出现在可视视窗内时,背景图才会加载显示。
使用背景图延时加载有什么好处?
首先上面已经说了,可以避免不必要的资源浪费,页面下部可视视窗外的很多元素也许用户根本不会去查看,所以它们的背景图也不必加载,只有当用户看到它们时,才去加载。
第二个好处就是减少机器人抓取网站时给服务造成的压力。有很多网页爬虫会频繁的访问你的网站,它们不管遇到什么资源都会抓取回去,页面上的图片它们最感兴趣,往往图片是最占流量的。如果将图片换成背景图,这些爬虫就无法识别,抓取不到这些图片,减少了服务器的压力。

您的昵称:*
QQ登录(无需注册直接登录可进行回复)
您的邮箱:(填写邮箱,如有回复可进行邮件通知)
验证码:
点击刷新