MUI - 解决动态列表页图片懒加载再次加载不成功的bug
首先描述一下功能##
实现列表页动态加载
通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现。
http://www.cnblogs.com/phillyx/
然后说一下bug##
- 首次加载时图片可以获取成功,
- 再次加载失败,通过chrome调试发现img 的 data-lazyload 属性没改变
- 调试的时候发现了bug
$.fn.imageLazyload = function(options) {
var lazyloadApis = [];
this.each(function() {
var self = this;
var lazyloadApi = null;
if (self === document || self === window) {
self = document.body;
}
//对,bug就在这,判定时如果body已有该属性,就不在加载了,整体的代码没看明白,注释太少了啊
var id = self.getAttribute('data-imageLazyload');
if (!id) {
id = ++$.uuid;
$.data[id] = lazyloadApi = new ImageLazyload(self, options);
self.setAttribute('data-imageLazyload', id);
} else {
lazyloadApi = $.data[id];
}
lazyloadApis.push(lazyloadApi);
});
return lazyloadApis.length === 1 ? lazyloadApis[0] : lazyloadApis;
}
- 问题找到了,那么就在再次加载数据时,清除该属性就ok了
document.body.removeAttribute('data-imagelazyload');
mui(document).imageLazyload({
placeholder: '../../images/img_head3.png'
});
END##
那么问题来了:
为什么会这么考虑,还有其他的解决方案么?
最新的解决方案参考DCloud问答的官方回复
MUI - 解决动态列表页图片懒加载再次加载不成功的bug的更多相关文章
- MUI - 基于plus.downloader的图片懒加载功能,支持本地缓存
基于plus.downloader的图片懒加载功能,支持本地缓存 简单说一下 在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的.我相信这对大多数的app都是强需求的. 怎么使 ...
- swift——启动页国际化:一步一步动态加载启动页图片,启动的时候加载文字
由于公司的需求,要求做一个国际化的启动页,因为app我也弄国际化了,就剩下启动页国际化未完成,百度了呵谷歌了好多答案都不尽如人意,最后也是看见同事完成,我也问了具体的做法,决定分享给需要的人,免得和我 ...
- 通过freemarker生成一个word,解决生成的word用wps打开有问题的问题,解决出word时中文文件名乱码问题,解决打开出word时打开的word出现问题的问题,出图片,解决动态列表
通过freemarker制作word比较简单 步骤:制作word模板.制作方式是:将模板word保存成为xml----在xml的word模板中添加相应的标记----将xml的word文件的后缀名 ...
- js打印html指定元素,解决动态获取的图片无法打印问题
用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https ...
- vue项目中,单页图片过多,使用懒加载
最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页(转)
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- 爬虫(七)图片懒加载技术、selenium和PhantomJS
动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...
随机推荐
- vue elementui点击表格当前行radio单选选中
官方文档:https://element.eleme.cn/#/zh-CN/component/radio 参考:https://www.cnblogs.com/steamed-twisted-rol ...
- ACdream 1112
题目链接 Alice and Bob Time Limit: 6000/3000MS (Java/Others)Memory Limit: 256000/128000KB (Java/Others) ...
- 破逼Json,该死的Json库,操了
jansson,就这个库,破几把玩意,本来很简单的Json,就是简单的字符串操作,ATL一个CString就能解决,QT的QSting也能解决,DELPHI的String也能解决.而这B,非把那么简单 ...
- SQL Sever实验二 交互式 SQL
一. 实验目的 1.观察查询结果, 体会 SELECT 语句实际应用: 2.要求学生能够使用 SELECT 语句进行数据库查询. 3. 熟练掌握各种查询的操作方法. 二. 实验准备 1. 完成实验一所 ...
- 【logo】设计书籍的logo
一个女孩发光般的看着,眼前发现的书籍 含义:这本书就是女孩想要得到的书籍 平台的宗旨:就是让学生能够得到想要的书籍 书籍来源:其他学生的书籍 目的:实现书籍回收再利用,同时让接受者低于市场价得到
- Yii 1.0 升级 Yii 2.0
//命名空间 use app\components\HttpException; model废除方法relations(),scopes() Yii::app() 修改成 Yii::$app $thi ...
- locationManager 回调方法不调用问题?
当locationManager都设置好了后开始定位服务后回调方法didUpdateToLocation不调用 [_locationManager setDelegate:self]; [_locat ...
- 【JZOJ3214】【SDOI2013】方程
╰( ̄▽ ̄)╭ 给定方程 X1+X 2+-+Xn=m 我们对第 1.. n1 个变量 进行一些限制 : X1≤A1 X2≤A2 - Xn1 ≤An1 我们对第 n1+1.. n1+1.. n1+ n2 ...
- Springboot 创建的maven获取resource资源下的文件的两种方式
Springboot 创建的maven项目 打包后获取resource下的资源文件的两种方式: 资源目录: resources/config/wordFileXml/wordFileRecord.xm ...
- Mac 电脑如何卸载 node
因为刚入手「 Mac 」很多淫技还不懂,在一次使用 npm install 的时候安装出错,提示为 npm 与 node 的版本有问题,所以就想着卸载重新装一个版本. 但是因为刚使用「 Mac 」所以 ...