iscroll.js和lazyload.js的兼容（滑动时，缓冲好的图片不更新）

Cheng_Gang 发布于2019-08-21 11:39 / 1179人阅读

摘要：另外我的这段代码可谓神来之笔，大家好好看看这一步很重要，否则图片不能完成缓冲效果原理在正在加载完后，就设置为可以缓冲。加载图片使用的效果淡入在离可视区以内的图片也开始加载了，提升体验度取消等默认不可点击效果解决。

以前在做项目的时候，把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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86971.html

移动前端知识总结

摘要：基础知识页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对的版本以后，上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快...

gotham 2019-08-29 11:08 评论0 收藏0
移动前端知识总结

摘要：基础知识页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对的版本以后，上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快...

MartinDai 2019-08-01 15:36 评论0 收藏0
移动前端知识总结

摘要：基础知识页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对的版本以后，上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快...

mengera88 2019-08-20 10:21 评论0 收藏0
关于数据异步加载引起Iscroll.js布局出错的解决方案

摘要：今天要说的就是用实现局部滚动出现页面布局的问题。问题页面底部多出一部分或是页面显示不全，拉动回弹后内容又显示不全。原因数据异步加载，无法正确获取页面元素的真实高度。自定义方法请求成功切换页面后刷新解决异步加载数据布局出错或相信对于前端攻城狮来说Iscroll.js,大家并不陌生，lite版本只有24kb。但可以解决 1、position:fixed在IOS端的兼容性问题 >移动端vi...

MonoLog 2019-08-20 17:04 评论0 收藏0