我们经常看到商城网站加载图片的时候有一个预加载图片的过程,于是开始试着去琢磨学习这个,其实并不是很复杂,简单使用如下。
第一步:引用js文件,如
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
第二步:使用img标签,如
<img class="lazy" data-original="images/real.png" src="images/loading.gif">
data-original为真实图片,src下为预加载图片,经过一段时间(时间可以自己设置属性data-defer)预加载再加载真实图片。
第三步:js方法调用
$("img.lazy").lazyload();
参考:http://www.daxueit.com/article/3944.html
分享到:
相关推荐
在实际应用中,jQuery.Lazyload.js的使用非常简单。首先,你需要在网页中引入jQuery库和jQuery.Lazyload.js文件,例如: ```html <script src="jquery.js"> <script src="jquery.lazyload.js"> ``` 然后,为需要懒...
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
在提供的`imageLazy`压缩包中,包含了使用jQuery LazyLoad.js实现的图片懒加载示例。解压后,你可以看到一个简单的HTML文件,其中包含了一些带有`data-src`属性的图片。运行这个HTML文件,滚动页面,你会观察到当...
里面有jquery.dropkick-1.0.0.js、slider.js、fullcalendar-1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery.jqzoom.js、jquery.lazyload.js、jquery....
在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地...
1. **基本使用**:引入jQuery库和jQuery.lazyload.js文件,然后对需要懒加载的图片添加特定的CSS类(通常为"data-src"),这样插件就能识别这些图片并进行处理。 2. **自定义占位符**:除了默认的1x1像素透明图,你...
总结,`jQuery.lazyload`插件通过简单的配置和使用,能有效提升网页性能,改善用户体验。合理利用其高级功能,可以实现更加定制化的懒加载效果。在实际项目中,结合合理的页面结构和优化策略,可以实现更高效的资源...
《jQuery LazyLoad 图片预...<script src="path/to/jquery.lazyload.min.js"> ``` 2. 图片标记:对需要延迟加载的图片添加"data-src"属性,用于存放实际的图片URL,同时保留传统的"src"属性,指向占位符。 ```html ...
综上所述,使用 jquery.lazyload.js 实现图片的延迟加载是一种非常实用的技术手段。它不仅可以显著加快页面加载速度,还能有效减轻服务器压力,为用户提供更流畅的浏览体验。对于拥有大量图片资源的网站来说,这种...
使用 `jQuery LazyLoad` 非常简单,首先需要在页面中引入 jQuery 和 LazyLoad 的 JavaScript 文件,然后按照以下步骤配置: 1. **标记图片**:给需要延迟加载的图片添加特定的类名,例如 `lazyload`。 2. **初始化...
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
在JavaScript领域,jQuery库提供了一个优秀的懒加载插件——jQuery LazyLoad.js,它能够有效地提高页面性能,降低服务器压力。 **一、jQuery LazyLoad.js 插件原理** jQuery LazyLoad.js 的核心思想是只加载视口内...