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

1、在使用jquery.lazyload.js时，如果是数据直接在DOM节点直接渲染，并且图片排列规则，使用方法：

给img标签添加的属性有：

 

src可以修改图片还没加载的时候展示的图片

例如：

html:

 

{foreach name="$zhuanqu[2][0]['goods_detail']" item="v"}
									{if $key<4}
									

										
											

												
											
											
{$v.goods_name}
											
{$v.price}
										
									
									{/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 += '
';
                        html += '
' + item.name + '
';
                        html += '￥' + Number(item.mktprice).toFixed(2) + '
';
                        html += '
￥' + Number(item.price).toFixed(2) + '
';
                        html += '
已售' + item.buy_num + '笔
';
                        html += '
';
                    }
                    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张可见区域外的图片,以避免出现这个问题.
});