背景图延迟加载(lazyload)技术

标签: 技术技巧 lazy 延迟加载 | 发表时间:2014-09-17 13:19 | 作者:歪脖骇客
出处:http://www.webhek.com

图片延迟加载技术目前已经被各种网站广泛的使用,但最近的一篇《 PS美女试验的惊人结果 》文章中使用的却是背景图延迟加载技术。为什么要使用背景图延迟加载技术?下面我们就来说一说这个问题。

之所以使用图片延迟加载技术,是为了避免浪费带宽。有些页面上嵌入了很多图片(上面所说的《 PS美女试验的惊人结果 》里就嵌入了30多张高清美女图),但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时,正常情况下,这30多种图片会全部一次性从服务器加载到客户端,就造成的服务器的压力,也给用户的浏览器造成压力,而且,也许用户之看了前几张图片就退出去了,那其它图片的加载就是浪费。

而使用图片延迟加载技术时,随着用户向下滚动页面,只有当图片滚动到可视视窗内,或接近可视视窗时,这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。

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

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

然后用一段js

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

这样,这个图片就会只有当需要加载时才会加载。

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

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

然后用一段js

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

这样,只有当这个div出现在可视视窗内时,背景图才会加载显示。

使用背景图延时加载有什么好处?

首先上面已经说了,可以避免不必要的资源浪费,页面下部可视视窗外的很多元素也许用户根本不会去查看,所以它们的背景图也不必加载,只有当用户看到它们时,才去加载。

第二个好处就是减少机器人抓取网站时给服务造成的压力。有很多网页爬虫会频繁的访问你的网站,它们不管遇到什么资源都会抓取回去,页面上的图片它们最感兴趣,往往图片是最占流量的。如果将图片换成背景图,这些爬虫就无法识别,抓取不到这些图片,减少了服务器的压力。

你觉得如何?有没有打算在你的页面上也使用背景图延迟加载技术?感兴趣的程序员可以看看《 PS美女试验的惊人结果 》这个页面上的背景图延迟加载的效果。

PS美女试验的惊人结果

PS美女试验的惊人结果

相关 [背景 延迟加载 lazyload] 推荐:

背景图延迟加载(lazyload)技术

- - Web骇客
图片延迟加载技术目前已经被各种网站广泛的使用,但最近的一篇《 PS美女试验的惊人结果 》文章中使用的却是背景图延迟加载技术. 为什么要使用背景图延迟加载技术. 之所以使用图片延迟加载技术,是为了避免浪费带宽. 有些页面上嵌入了很多图片(上面所说的《 PS美女试验的惊人结果 》里就嵌入了30多张高清美女图),但电脑的屏幕一次只能显示一张或顶多2张.

hibernate的延迟加载

- - ITeye博客
    代码的逻辑是:查询出id为1的major, 并输出其名字. 很明显, 代码的逻辑是对的.   可一运行就会报错:. 翻译过来就是:  延迟加载异常:不能初始化代理 --- session不存在. 出现这个报错信息的原因就在于hibernate的延迟加载机制.     所谓的延迟加载就是程序在使用load, iterator方法执行查询及关联查询时, 并不会马上发送并执行sql语句, 而是在调用(被查询)对象属性的getter方法时才去执行查询.

Hibernate延迟加载机制

- - 企业架构 - ITeye博客
转自:http://blog.163.com/xi_zh_qi/blog/static/8501594200812695053939/.    延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作. 在Hibernate中提供了对实体对象的延迟加载以及对集合的延迟加载,另外在Hibernate3中还提供了对属性的延迟加载.

Mybatis查询延迟加载

- - Elim的个人空间
Mybatis 查询延迟加载. 1.1        启用延迟加载. 1.2        分析.        Mybatis的延迟加载是针对嵌套查询而言的,是指在进行查询的时候先只查询最外层的SQL,对于内层SQL将在需要使用的时候才查询出来. Mybatis的延迟加载默认是关闭的,即默认是一次就将所有的嵌套SQL一并查了将对象所有的信息都查询出来.

拒绝图片延迟加载,爽爽的看美图

- 书皮 - 博客园-首页原创精华区
    有一天我一个朋友访问一个XX图片网站……每个人背后总有几个背黑锅的“朋友”,好吧,我承认那个“朋友”其实是我自己,你能把我怎么的.     这个网站用的是Discuz X2搭建的,启动了Discuz的图片延迟加载的功能. 现在很多图片网站为了降低服务器压力都启用了图片延迟加载的机制,也就是只有图片处于可视区域才加载,这样用户没看到的图片就不加载,对于服务器的负载减轻还是帮助很大的.

延迟加载图片的 jQuery 插件:Lazy Load

- - 我爱水煮鱼
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的 Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片.

图片延迟加载 - 前端开发技能必备系列

- - 博客园_首页
在网上经常会看到一些很长的网页会延迟加载其中的图片,我认为这是一种按需分配的做法,网页只为那些想继续浏览网页的人加载后面的图片,在不影响用户体验的前提下,最大程度地减少服务器负担和流量. 目前,主要的购物网站都采用了这种加载方式. 今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下.

一款非常轻量的延迟加载插件

- - CSS库
jQuery Unveil 是一款轻量的延迟加载插件,支持提供用于视网膜显示设备的高分辨率图像. 这个插件非常有用,它能提高长网页中图像的加载性能,因为视口以外的图像(可见部分网页)将不会被加载,直到用户滚动到它们所在的区域.   延迟加载有一些很酷的选项,如自定义效果,容器,事件或数据属性. 如果你不想使用这些功能,你可以减小文件的大小,只留下必要的代码来显示图像.

Photoshop 图片背景素材

- yasy - 紫萝卜 | 所有与设计有关
设计师设计的时候经常会用到不同的的背景来搭配以获得最佳的设计效果,这篇文章收集了30个photoshop经典的图片背景素材.

"创作天书奇谭的背景"

- liuce.cn - KDS Shanghai
1980年代初,英国BBC提供了一个剧本,说是中国的神话故事,要与上海美影厂合拍动画片,由他们投资. 可是剧本写得乱七八糟,从盘古开天地到《山海经》,还有其他传说、神话故事,什么都有,角色繁多,线索杂乱. 美影厂便向英国BBC提出,合拍可以,我方负责重写剧本,否则就拉倒.   编剧的重任落到了王树忱和包蕾身上,他们从原剧本写到的一大堆情节中,发现了《平妖传》里的狐狸精故事,大概占了整个篇幅的10%.