使用jquery.lazyload.js图片预加载（懒加载）遇到的问题，图片加载不出来

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张可见区域外的图片,以避免出现这个问题.
});