`

jquery lazyload 延迟加载

阅读更多

      现在淘宝,新浪等大网站,大量的图片都是在拉动滚动条的时候才加载,这样不但提高了用户体验,减少页面加载时间,同时也减少了不少htttp请求,减少了服务器的压力。

     最近研究了下,发现是利用imagelazyload技术来实现图片的延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

    从网上找了些资料,发现利用jquery的jquery.lazyload插件可以实现图片的延迟加载,所以就研究了翻,可是通过firefox的 firebug的检测,插件并不想象的那样,当拉动滚动条的时候图片才加载,而是页面加载时,所有图片都加载了,只是没有显示罢了,为了弄明白,特此下了 个jquery.lazyload来做个小实验。

下面是firebug检测结果1365×331

通过firebug我们发现,在页面加载的时候,所有图片都向服务器发出了请求,当拉动滚动条时,都又向服务器发出了请求,

这并不是我们想要的结果,不但没有减少服务器压力,反而增加了服务器请求。

上网查资料,通过一些网友的资料,终于弄懂了怎么回事,研究了下jquery.lazyload插件的源码。

jquery.lazyload 插件是通过将不需要加载的img的src值暂时存在original中,阻止img标签向服务器发送http请求,当需要加载的时候,再将 original中的保存的src值附回去。就像上面图中,一些图片向服务器中发送的请求,但没有成功。当加载页面时,img向服务器发送请求的同时 src值被改变,所以没有成功。

为了实现我们想要的目的,只有改一下jquery.lazyload插件了

        先把蓝色背景的代码注掉

479×106

然后 在加上下面蓝色背景的代码

下面是html代码 将img的加个 original 把原来src的值给它,src可以给它个一个像素的小图片,防止加载的时候出现红色叉,也可以给它个gif动画

下面是javascript代码


分享到:
评论

相关推荐

    jquery lazyload延时加载

    jQuery LazyLoad 实现了图片的延时加载(也称为懒加载),即只有当图片进入用户可视区域时,才会开始加载,这样可以显著减少页面初次加载时的流量,并提高页面加载速度。 **一、jQuery LazyLoad 基本原理** 1. **...

    jquery.lazyload图片预加载效果 jquery预加载

    《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...

    JQuery LazyLoad 图片懒加载实例

    为了解决这一问题,我们可以使用`jQuery LazyLoad`插件实现图片的延迟加载,即“懒加载”。本文将详细介绍如何利用jQuery LazyLoad来实现图片的懒加载功能,并通过实例进行演示。 ### 1. jQuery LazyLoad 插件简介 ...

    JQuery Lazyload加载图片实例

    为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许我们实现图片的延迟加载(也称为懒加载),即图片只在用户滚动到可视区域时才开始加载。这种方式可以显著提升网页的加载速度,特别是对于拥有...

    jquery lazyload图片延迟加载技术

    **jQuery LazyLoad 图片延迟加载技术** 在网页设计中,图片是重要的元素之一,但大量图片的加载往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们引入了图片延迟加载(Lazy Load)技术。...

    jquery.lazyload 实现图片延迟加载

    **jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...

    图片延迟加载 lazyload

    然后引入 jQuery.lazyload 插件,如 `jquery.lazyload.min.js` 文件,提供延迟加载的功能。 2. **HTML 结构**:在 HTML 中,为需要延迟加载的图片添加特定的类名(通常是 `.lazyload`),同时设置 `data-src` 属性...

    图片延迟加载特效,jquery.lazyload.js

    你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

    jquery lazyload延迟加载技术的实现原理分析

    《jQuery LazyLoad延迟加载技术的实现原理》 延迟加载(LazyLoad)技术是现代网页优化的重要策略之一,尤其对于图片、Flash资源、iframe以及类似FCK的网页编辑器等大容量资源,它能够显著提升页面加载速度,提高...

    jquery.lazyload.js 图片懒加载 --demo

    **jQuery LazyLoad.js 图片懒加载技术详解及Demo演示** 在网页设计中,图片加载是一项重要的性能优化策略。尤其对于内容丰富的网站,一次性加载所有图片可能会导致页面加载速度变慢,影响用户体验。为了解决这个...

    jQuery_lazyload

    jQuery_lazyload通过监听滚动事件来实现延迟加载。当用户滚动页面,使得原先不在视口内的图片或者其他元素进入视口时,插件会动态地替换这些元素的`src`属性,使其加载真实的内容。这样,只有当用户实际需要看到某...

    前端项目-jquery-lazyload-any.zip

    jQuery LazyLoad Any是一个高效的插件,专为延迟加载图像、iframe或者其他任何元素而设计,它大大提升了页面的性能。这个压缩包文件"前端项目-jquery-lazyload-any.zip"包含了实现这一功能的所有资源,主要文件夹为...

    jQuery lazyload

    为了解决这个问题,开发者们通常采用延迟加载(Lazy Load)技术,只在图片即将进入浏览器视口时才加载,这就是jQuery Lazyload插件的核心功能。它有效地减少了用户首次访问页面时的数据传输量,提升了用户体验。 **...

    jQuery.lazyload.js

    **jQuery.lazyload.js** 是一个基于 **jQuery** 的图片延迟加载插件,它设计用于优化网页性能,提高页面加载速度,提升用户体验,并减轻服务器负担。延迟加载,也称为懒加载,是一种网页优化策略,它允许网页只加载...

    懒加载jquery.lazyload.js

    在JavaScript领域,jQuery库提供了一个优秀的懒加载插件——jQuery LazyLoad.js,它能够有效地提高页面性能,降低服务器压力。 **一、jQuery LazyLoad.js 插件原理** jQuery LazyLoad.js 的核心思想是只加载视口内...

    图片延迟加载显示代码Jquery.LazyLoad.js改良版

    从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。

    【ZT】图片延迟加载 jquery.lazyload插件

    标题中的“【ZT】图片延迟加载 jquery.lazyload插件”指的是使用jQuery库的一个扩展插件——jQuery Lazyload,该插件主要用于实现图片的延迟加载技术。延迟加载是一种优化网页性能的方法,它允许图片在用户滚动到...

    lazyload-2.x.zip

    jQuery LazyLoad是由Timo Reymann开发的一款高效、轻量级的插件,其核心理念是延迟加载非可视区域的图片或其他内容。通过监听滚动事件,当元素进入可视区时,才会触发实际的加载动作,实现资源的按需加载。 二、...

    jQuery图片延迟加载插件jQuery.lazyload

    jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。演示地址http://www.jq22.com/jquery-info390

Global site tag (gtag.js) - Google Analytics