使用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(下拉)等,常用fadeInthreshold: 200, // 提前开始加载// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉event: 'click',  // 事件触发时才加载// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…container: $("#container"),  // 对某容器中的图片实现效果// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片failurelimit : 10 // 图片排序混乱时// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

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

Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了 ...
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
jquery.lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
magento effects.js jquery.lazyload.js 冲突
2019独角兽企业重金招聘Python工程师标准>>> 当这两个js并存时,会造成加载图片闪烁的冲突问题原因: jquery.lazyload.js会触发叫"appear ...
模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
模仿微信朋友圈图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
移动端图片居多，加载过慢，使用延迟加载|懒加载（ lazyload.js）
文章目录[隐藏] Lazy Load 插件原理开始使用 lazyload.js lazyload.js 高级使用方法: 更周全的做法提前加载自定义触发事件自定义显示效果把图像插入某个容器加 ...
jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
图片预加载与图片懒加载
图片预加载与图片懒加载图片预加载图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...
jQuery.lazyload懒加载
注意事项:jquery.js务必先引进,然后才加载lazyload:img长宽一定要有,每幅长宽可以不一致:在js段,可以不用$(window).ready来加载事件: 1.将图片路径写入data-o ...
html5 游戏图片预加载,前端实现图片（img）预加载
.box{width: 1000px;height: 7000px;position: relative;} .igm1,.igm2,.igm3{width: 1000px;height: 1000p ...

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

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

最新文章

热门文章