1、在使用jquery.lazyload.js時，如果是資料直接在DOM節點直接渲染，並且圖片排列規則，使用方法：

給img標籤新增的屬性有：

<img class="lazy" src="__TEMP__/{$style}/public/images/load_banner.jpg" data-original="{:__IMG($v.adv_image)}" alt="">

src可以修改圖片還沒載入的時候展示的圖片

例如：

html:

{foreach name="$zhuanqu[2][0]['goods_detail']" item="v"}
									{if $key<4}
									<li>
										<a href="{:__URL('APP_MAIN/goods/goodsdetail?id='.$v.goods_id)}">
											<div class="goods-img">
												<img class="lazy" src="__TEMP__/{$style}/public/images/load_good.jpg" data-original="{:__IMG($v.pic_cover_small)}" alt="">
											</div>
											<p class="goods-name">{$v.goods_name}</p>
											<p class="goods-price">{$v.price}</p>
										</a>
									</li>
									{/if}
									{/foreach}
 

script:

//圖片懶載入
$.fn.myLazyLoad = function() {
        this.lazyload();
    };
    $("img.lazy").myLazyLoad();

2、如果是通過ajax動態獲取的，使用方法：

var getData=function(s,scope){
        $.ajax({
            url: '<{$base_url}>/index.php/openapi/recommend/get_p?s=' + s,
            type: 'get',
            data: {},
            dataType: 'json',
            success: function (res) {
                var data = res.data;
                var html = '';
                if (res.data == '') {
                    //不輸出內容
                } else {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        html += '<div class="dty"><a class="item_link" href="/m/item-' + item.product_id + '.html"><div class="set_i"><img class="lazy" src="/themes/mobile/shanyaohui/images/loading_img.gif" data-original="' + item.image_default_id + '"></div>';
                        html += '<p class="tit">' + item.name + '</p>';
                        html += '<span>￥<del class="fr">' + Number(item.mktprice).toFixed(2) + '</del></span></br>';
                        html += '<p class="am-fl fl">￥' + Number(item.price).toFixed(2) + '</p>';
                        html += '<p class="am-fr fd">已售' + item.buy_num + '筆</p>';
                        html += '</a></div>';
                    }
                    scope.append(html);
                    $("img").myLazyLoad();//資料渲染後初始化                }
            }, error: function () {
                console.log('ajax error')
            }
        });
    }
    // 圖片懶載入
    $.fn.myLazyLoad = function() {
        this.lazyload();
    };
    $("img.lazy").myLazyLoad();
 
                }
            }, error: function () {
                console.log('ajax error')
            }
        });
    }
    // 圖片懶載入
    $.fn.myLazyLoad = function() {
        this.lazyload();
    };
    $("img.lazy").myLazyLoad();

3、如果圖片排列混亂，導致圖片加載出錯或者載入不出來，可設定引數：

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用圖片提前佔位
    // placeholder,值為某一圖片路徑.此圖片用來佔據將要載入的圖片的位置,待圖片載入時,佔位圖則會隱藏
  effect: "fadeIn", // 載入使用何種效果
    // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前開始載入
    // threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目標位置還有200的高度時就開始載入圖片,可以做到不讓使用者察覺
  event: 'click',  // 事件觸發時才載入
    // event,值有click(點選),mouseover(滑鼠劃過),sporty(運動的),foobar(…).可以實現滑鼠莫過或點選圖片才開始載入,後兩個值未測試…
  container: $("#container"),  // 對某容器中的圖片實現效果
    // container,值為某容器.lazyload預設在拉動瀏覽器滾動條時生效,這個引數可以讓你在拉動某DIV的滾動條時依次載入其中的圖片
  failurelimit : 10 // 圖片排序混亂時
     // failurelimit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況,failurelimit意在載入N張可見區域外的圖片,以避免出現這個問題.
});