jquery懒加载使用方法

原创
0 1785
时 间:2017-12-29 13:44
分 类:jquery
来 源:鹏爷
标 签:懒加载

懒加载是网站性能优化的插件,可以提高用户体验。

页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。

1、引入jquery

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js" ></script>

2、引入jquery懒加载插件

<script type="text/javascript" src="//cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js" ></script>

3、在需要懒加载的图片上添加如下:

<img class='lazy' src='../images/i.png' data-original='" + obj.picurl + "' width='600' height='300' >";
src显示默认的图片
data-original为要显示的图片

4、启动懒加载

$("img.lazy").lazyload();

一般放在ajax complete中加载

如下代码:

$.ajax({  
        type: 'POST',  
        url: NET.getBisList,  
        dataType: 'json',  
        async: true,  
        data: {  
            'city': city,  
            'districtid': districtid,  
            'cont': cont,  
            'page': page,  
            'lon': lon,  
            'lat': lat,  
            'keywords': keywords,  
            'distance': distance  
        },  
        success: function(data) {  
            if (data.state == 0000) {  
                var str = "";  
                for (var i = 0; i < data.msg.length; i++) {  
                    var obj = data.msg[i];  
                    str += "<li class='shop_det' onclick='openBusinessDet(" + obj.id + ")'>";  
                    str += " <div>";  
                    str += "   <div class='shop_prof'>";  
                    str += "    <input type='hidden' name='id' id='B_id' value='" + obj.id + "'/>";  
                    str += "    <img class='lazy' src='../images/maititi.png' data-original='" + obj.picurl + "' width='600' height='300' onerror='loadImgError(" + obj.id + ")' id='img" + obj.id + "'>";  
                    str += "   </div>";  
                    str += "   <div class='info_det'>";  
                    str += "    <span class='name_det'>" + obj.bisname + "</span>";  
                    str += "    <span class='location'>距您" + (obj.distance / 1000).toFixed(1) + "km</span>";  
                    str += "    <span class='add_det'>" + obj.address + "</span>";  
                    str += "   </div>";  
                    str += " </div>";  
                    str += "</li>";  
                }  
                $('#showshops').append(str);  
                $("#loadMore").html("点击加载更多");  
            } else {  
                //没有数据  
                $("#loadMore").html(data.msg);  
                $("#loadMore").unbind("click"); //移除click  
            }  
        },  
        complete: function() {  
            $("img.lazy").lazyload();  
        },  
        error: function(xhr, type) {  
  
        }  
    });


评论