我们经常看到商城网站加载图片的时候有一个预加载图片的过程,于是开始试着去琢磨学习这个,其实并不是很复杂,简单使用如下。
第一步:引用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.min.js插件 直接下载引入即可~~~~~~~
使用jQuery.Lazyload的优点 提高页面加载速度。 网页图片挨个渐显,非常美观。
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
jquery.lazyload.js 图片懒加载 --demo
里面有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 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地...
延迟加载图片jquery.lazyload.js 延迟加载图片jquery.lazyload.js
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
jquery.lazyload.js
/** ** 懒加载 jquery.lazyload.1.9.7.js ** -------------------------- **/
修改jquery.lazyload.js实现页面延迟载入
没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是...
但是通过httpwatch等工具就可以看到,页面载入完毕后又发布很多空请求,而空请求就是由这些被替换过的img标签产生的,空请求也会一定程度上增加页面的打开时间,所以jquery.lazyload.js并未真生的实现页面延迟载入。...