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 ...
随机推荐
- Codeforces 899F Letters Removing 线段树/树状数组
虽然每次给一个区间,但是可以看作在区间内进行数个点操作,同样数列下标是动态变化的,如果我们将每个字符出现看作1,被删除看作0,则通过统计前缀和就能轻松计算出两个端点的位置了!这正是经典的树状数组操作 ...
- Puppet master-agent模型搭建
Puppet master-agent模型工作过程: 基于ssl xmlrpc进行通信,端口8140/tcp agent:默认每隔30分钟向master发送node name和facts,并请求cat ...
- python \r \t \n 各种转义字符
转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \’ 单引号 \” 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵向制表符 \t 横向制 ...
- JavaScript内容回顾
<!DOCTYPE html> <!--JavaScript内容回顾--> <html lang="en"> <head> < ...
- TZ_13_Eureka的高可用
1.Eureka Server即服务的注册中心,在刚才上一篇中,我们只有一个EurekaServer,事实上EurekaServer也可以是一个集群,形成高可用的Eureka中心. 目的:多个Eure ...
- 转var,let,const,js严格模式的详解
最近看微信公众账号/知乎网上的文章说,现在的前端的人都注重用什么框架,一问原生js感觉都没有用到工作中.用不到的,学这些意义没有.上午我刚面试了一个前端,工作4年吧.最初是北大青鸟培训的,做后端.ne ...
- Hackerrank--Ashton and String(后缀数组)
题目链接 Ashton appeared for a job interview and is asked the following question. Arrange all the distin ...
- Shell 常用特性
管道(|) 管道 (|): 将一个命令的输出作为另外一个命令的输入. 管道同样可以在标准输入输出和标准错误输出间做代替工作,这样一来,可以将某一个程序的输出送到另一个程序的输入,其语法如下: ...
- CesiumLab V1.4 分类3dtiles生成(倾斜单体化、楼层房间交互)我记得我是写过一篇关于倾斜单体化的简书文章的,但是现在找不到了。不过找不到也好,就让他随风逝去吧,因为当时我写那篇文章的时候,就发现了cesium实际是有另一种更高效的单体化。就下面这个示例https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=
我记得我是写过一篇关于倾斜单体化的简书文章的,但是现在找不到了.不过找不到也好,就让他随风逝去吧,因为当时我写那篇文章的时候,就发现了cesium实际是有另一种更高效的单体化.就下面这个示例 http ...
- 模板与泛型编程 c++ primer ch16.1
在摸板定义中,模板参数列表不能为空, 编译器用推断出的参数来进行 实例化(instantiation) 一般来说 模板是有type parameter 但是也可以声明 nontype paramete ...