1、引用js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

2、需要加载的图片写成以下的形式:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">
或者:

<img class="lazy" data-original="img/example.jpg"  src="/Content/images/home/nopic_shop.png" width="640" height="480">

最下面的是有默认图的。建议用下面的

3、在要加载的页面,加上js

$(function() {
    $("img.lazy").lazyload();
});

 

我一般使用下面有效果的模式:

//加载图片
$("img.lazy").lazyload({
effect: "fadeIn"
});

 

更多需求文档,请参考官方的介绍:

http://www.appelsiini.net/projects/lazyload

 

转载请注明出处:http://www.lishuoershouche.com/article/20230401/598054.html

随机推荐

  1. jQuery.lazyload+masonry改良图片瀑布流代码

    实现方法如下:(这里只发jquery了,相关html代码请各位自己脑补一下吧,我就不发了,哈哈) /** * 自动刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('...

  2. jquery.lazyload 使用

    1、引用js script src="jquery.js" type="text/javascript"/script script src="jquery.lazyload.js" type="text/javascript"/scri...

  3. jquery.lazyload实现图片延迟加载jquery插件

    什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动...