现在淘宝,新浪等大网站,大量的图片都是在拉动滚动条的时候才加载,这样不但提高了用户体验,减少页面加载时间,同时也减少了不少htttp请求,减少了服务器的压力。
最近研究了下,发现是利用imagelazyload技术来实现图片的延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
从网上找了些资料,发现利用jquery的jquery.lazyload插件可以实现图片的延迟加载,所以就研究了翻,可是通过firefox的
firebug的检测,插件并不想象的那样,当拉动滚动条的时候图片才加载,而是页面加载时,所有图片都加载了,只是没有显示罢了,为了弄明白,特此下了
个jquery.lazyload来做个小实验。
下面是firebug检测结果
通过firebug我们发现,在页面加载的时候,所有图片都向服务器发出了请求,当拉动滚动条时,都又向服务器发出了请求,
这并不是我们想要的结果,不但没有减少服务器压力,反而增加了服务器请求。
上网查资料,通过一些网友的资料,终于弄懂了怎么回事,研究了下jquery.lazyload插件的源码。
jquery.lazyload
插件是通过将不需要加载的img的src值暂时存在original中,阻止img标签向服务器发送http请求,当需要加载的时候,再将
original中的保存的src值附回去。就像上面图中,一些图片向服务器中发送的请求,但没有成功。当加载页面时,img向服务器发送请求的同时
src值被改变,所以没有成功。
为了实现我们想要的目的,只有改一下jquery.lazyload插件了
先把蓝色背景的代码注掉
然后 在加上下面蓝色背景的代码
下面是html代码 将img的加个 original 把原来src的值给它,src可以给它个一个像素的小图片,防止加载的时候出现红色叉,也可以给它个gif动画
下面是javascript代码
分享到:
相关推荐
jQuery LazyLoad 实现了图片的延时加载(也称为懒加载),即只有当图片进入用户可视区域时,才会开始加载,这样可以显著减少页面初次加载时的流量,并提高页面加载速度。 **一、jQuery LazyLoad 基本原理** 1. **...
《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...
为了解决这一问题,我们可以使用`jQuery LazyLoad`插件实现图片的延迟加载,即“懒加载”。本文将详细介绍如何利用jQuery LazyLoad来实现图片的懒加载功能,并通过实例进行演示。 ### 1. jQuery LazyLoad 插件简介 ...
为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许我们实现图片的延迟加载(也称为懒加载),即图片只在用户滚动到可视区域时才开始加载。这种方式可以显著提升网页的加载速度,特别是对于拥有...
**jQuery LazyLoad 图片延迟加载技术** 在网页设计中,图片是重要的元素之一,但大量图片的加载往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们引入了图片延迟加载(Lazy Load)技术。...
**jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...
然后引入 jQuery.lazyload 插件,如 `jquery.lazyload.min.js` 文件,提供延迟加载的功能。 2. **HTML 结构**:在 HTML 中,为需要延迟加载的图片添加特定的类名(通常是 `.lazyload`),同时设置 `data-src` 属性...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
《jQuery LazyLoad延迟加载技术的实现原理》 延迟加载(LazyLoad)技术是现代网页优化的重要策略之一,尤其对于图片、Flash资源、iframe以及类似FCK的网页编辑器等大容量资源,它能够显著提升页面加载速度,提高...
**jQuery LazyLoad.js 图片懒加载技术详解及Demo演示** 在网页设计中,图片加载是一项重要的性能优化策略。尤其对于内容丰富的网站,一次性加载所有图片可能会导致页面加载速度变慢,影响用户体验。为了解决这个...
jQuery_lazyload通过监听滚动事件来实现延迟加载。当用户滚动页面,使得原先不在视口内的图片或者其他元素进入视口时,插件会动态地替换这些元素的`src`属性,使其加载真实的内容。这样,只有当用户实际需要看到某...
jQuery LazyLoad Any是一个高效的插件,专为延迟加载图像、iframe或者其他任何元素而设计,它大大提升了页面的性能。这个压缩包文件"前端项目-jquery-lazyload-any.zip"包含了实现这一功能的所有资源,主要文件夹为...
为了解决这个问题,开发者们通常采用延迟加载(Lazy Load)技术,只在图片即将进入浏览器视口时才加载,这就是jQuery Lazyload插件的核心功能。它有效地减少了用户首次访问页面时的数据传输量,提升了用户体验。 **...
**jQuery.lazyload.js** 是一个基于 **jQuery** 的图片延迟加载插件,它设计用于优化网页性能,提高页面加载速度,提升用户体验,并减轻服务器负担。延迟加载,也称为懒加载,是一种网页优化策略,它允许网页只加载...
在JavaScript领域,jQuery库提供了一个优秀的懒加载插件——jQuery LazyLoad.js,它能够有效地提高页面性能,降低服务器压力。 **一、jQuery LazyLoad.js 插件原理** jQuery LazyLoad.js 的核心思想是只加载视口内...
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
标题中的“【ZT】图片延迟加载 jquery.lazyload插件”指的是使用jQuery库的一个扩展插件——jQuery Lazyload,该插件主要用于实现图片的延迟加载技术。延迟加载是一种优化网页性能的方法,它允许图片在用户滚动到...
jQuery LazyLoad是由Timo Reymann开发的一款高效、轻量级的插件,其核心理念是延迟加载非可视区域的图片或其他内容。通过监听滚动事件,当元素进入可视区时,才会触发实际的加载动作,实现资源的按需加载。 二、...
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。演示地址http://www.jq22.com/jquery-info390