图片延迟加载,网上有很多资料,但是我找jquery.lazyload.js找了很久没发现,而且很多地方的js不对,
想来想去这个应该也是jquery的一个插件,于是搜索jquery的所有插件,终于发现了,下载地址如下:
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
这个是最新版本的jquery.lazyload.js
下面来介绍下使用方法:
首先引入所需js
<scriptsrc="jquery-1.7.2.js"type="text/javascript"></script>
注:我用的是最新版本的jquery核心库
<scriptsrc="jquery.lazyload.js"type="text/javascript"></script>
然后将<img>文件改变
<img src="img/grey.gif"data-original="img/example.jpg" width="640"heigh="480">
src是用于占位的图片 data-original是真实图片地址
最后写js代码
$("img").lazyload();
或者延迟指定时间加载(这里是5000)
$(function() {
$("img").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() { $("img").trigger("sporty") }, 5000);
});
参考与
http://www.appelsiini.net/projects/lazyload
相关推荐
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
- **设置图片属性**:将图片的`src`属性替换为`data-src`,以告诉LazyLoad.js这些图片需要延迟加载。 ```html <img data-src="images/lazy-image.jpg" alt="懒加载图片"> ``` - **初始化插件**:在文档加载完成后...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...
**jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...
### 延迟加载图片技术详解:利用jquery.lazyload.js实现高效页面加载 #### 技术背景 在互联网时代,网站或应用中的图片资源占据了大量的数据传输量,尤其是在移动网络环境下,图片的加载速度直接影响了用户体验及...
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
1. **基本使用**:引入jQuery库和jQuery.lazyload.js文件,然后对需要懒加载的图片添加特定的CSS类(通常为"data-src"),这样插件就能识别这些图片并进行处理。 2. **自定义占位符**:除了默认的1x1像素透明图,你...
没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是...
图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js
2. **下载jQuery LazyLoad.js**:从官方仓库或者第三方源获取最新版本的`jquery.lazyload.js`文件。 3. **引入插件**:将`jquery.lazyload.js`文件添加到HTML页面的`<head>`部分或者`<body>`底部。 4. **设置HTML...
- **jquery.lazyload.js**:这是懒加载插件的核心文件,包含了实现图片延迟加载功能的JavaScript代码,需要在网页中引入并进行适当配置。 - **图片延迟加载(懒加载)jQuery插件**:可能是一个包含使用该插件的HTML、...
修改jquery.lazyload.js实现页面延迟载入
`jQuery.lazyload` 是一个优秀的jQuery插件,它允许我们在页面滚动时按需加载图片,从而显著提高页面加载速度。 ### 1. 懒加载概念 懒加载是一种延迟加载策略,主要针对非首屏内容,尤其是大尺寸图片。当用户滚动...
然后引入 jQuery.lazyload 插件,如 `jquery.lazyload.min.js` 文件,提供延迟加载的功能。 2. **HTML 结构**:在 HTML 中,为需要延迟加载的图片添加特定的类名(通常是 `.lazyload`),同时设置 `data-src` 属性...
标题中的“【ZT】图片延迟加载 jquery.lazyload插件”指的是使用jQuery库的一个扩展插件——jQuery Lazyload,该插件主要用于实现图片的延迟加载技术。延迟加载是一种优化网页性能的方法,它允许图片在用户滚动到...
1. **引入 jQuery 和 LazyLoad**:首先确保页面中已经引入了 jQuery 库,然后引入 LazyLoad 的 JavaScript 文件,如 `jquery.lazyload.js`。 2. **设置 HTML 结构**:给需要延时加载的图片添加特定的类名(如 `lazy...
为了解决这一问题,我们可以使用`jQuery LazyLoad`插件实现图片的延迟加载,即“懒加载”。本文将详细介绍如何利用jQuery LazyLoad来实现图片的懒加载功能,并通过实例进行演示。 ### 1. jQuery LazyLoad 插件简介 ...
为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许我们实现图片的延迟加载(也称为懒加载),即图片只在用户滚动到可视区域时才开始加载。这种方式可以显著提升网页的加载速度,特别是对于拥有...