博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iscroll.js和lazyload.js的兼容(滑动时,缓冲好的图片不更新)
阅读量:5826 次
发布时间:2019-06-18

本文共 753 字,大约阅读时间需要 2 分钟。

以前在做项目的时候,把jquery.lazyload.js和iscroll.js一起使用,当滑动页面的时候,iscroll的滑动效果出来了,但是图片懒加载的效果没出来,主要是因为图片缓冲完毕后不能及时刷新

解决两者兼容问题操作:

1、(iscroll.js和lazyload.js的兼容(滑动时,缓冲好的图片不更新)):

onScrollMove: function(){    $("#"+id).trigger('scroll');//iscroller和loadlazy.js图片缓冲完毕后不能及时刷新,加上这个模拟浏览器被滑动,那么图片就可以刷新了}

原理是:只要浏览器滚动,那么图片就会刷新,所以在scroll滚动时模拟浏览器滚动,这个问题就解决了。

另外我的这段代码可谓神来之笔,大家好好看看

2、

//这一步很重要,否则图片不能完成缓冲效果(原理:在src正在加载完后,就设置为可以缓冲。)        $("#storeImgs ul li img").on("load",function(){            $("#storeImgs ul li img").lazyload({                effect: "fadeIn", //加载图片使用的效果(淡入)                threshold : 400    //在离可视区400px以内的图片也开始加载了,提升体验度            });        });

下面先给大家看个全的代码,复制粘贴可直接看到全部效果。

若不能,请自行导入:
jquery-1.7.1.min.js,
jquery.lazyload.js,
iscroll.js三个库。

title

转载地址:http://hlsdx.baihongyu.com/

你可能感兴趣的文章