关于web页面使用 ajax 和 lazyload.js 缓存预加载图片

关于web页面使用 ajax 和 lazyload.js 缓存预加载图片

<img src="__STATIC__/img/sysImgs/loading.gif"  data-original="__STATIC__/images/img.png">
src：是图片未加载完成显示的图片     data-original：是需要显示的图片

Ajax 提交数据更新页面

$(document).on("click",".Nav-item",function(){
          $.ajax({
              type:'get',
              url:'/Store/Category/index?do=getSonCategory',
              data:data,
              async:false,
              dataType:'json',
              success:function(jsonData) {
                  if(jsonData.state) {
                      var goods = jsonData.goods;
                      var html;
                      $.each(goods, function (key, item) {
                          html += '            <img src="__STATIC__/img/sysImgs/loading.gif"  data-original="' + item.img + '">\n';
                      })
                      //在   $('.uls')  类增加图片内容
                      $('.uls').append(html);
                      //然后调用图片预加载方法
                      is()；
                  }
              }
          })
      })
	   function is() {
	       $("img",$('.uls')).lazyload({
	           placeholder : "__STATIC__/img/sysImgs/loading.gif",	//默认的占位图片	可以直接把占位的图片路径赋给img的src
	           container:$('.uls'),									//触发可滚动的容器	默认是浏览器的滚动条，也就是window。可以自定义带滚动条的 DIV 元素。如：$("#container")
	           effect: "fadeIn",									//默认为show	载入特效	fadeIn（淡入效果）
	           threshold:1000,										//临界点	可以设置>0的数值，让图片距离屏幕一定像素时提前加载。
           	   skip_invisible:false,								//加载隐藏的图片	默认忽略了隐藏图片，可以设置为false加载隐藏图片
	           effectspeed:1000										
	       });
	   }