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 ...
随机推荐
- python在WIN下CMD运行中文乱码及python 2.x python 3.x编码问题
在CMD中运行python代码时,我们会发现,即使在代码中加入# -*- coding:utf-8 -*- 这段代码,中文仍然会乱码.如下: # -*- coding:utf-8 -*- conten ...
- 【html、CSS、javascript-8】JavaScript作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域,即:大括 ...
- linux环境变量设置命令
1echo $ <变量名> //显示某个环境变量 2env // environment (环境) 的简写,列出来所有的环境变量 3set //显示所有本地定义的Shell ...
- 计蒜客 Zoning Houses(线段树区间最大次大)
Given a registry of all houses in your state or province, you would like to know the minimum size of ...
- js实现放大镜特效的实现方法
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- LUOGU P2587 [ZJOI2008]泡泡堂
传送门 解题思路 刚开始先写了个田忌赛马的贪心,就是要是打不过就拿最弱的送死,30分...后来瞄了眼题解,发现这样是错的,比如说这样的数据 : 3 3 2 3 1 如果用田忌赛马的话,让2-3 3-1 ...
- web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式
1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...
- golang字符串常用系统函数
- Centos 下添加开机自启动服务和脚本【转】
最近刚玩Centos7的系统,跟Centos6还是很多方面有改变的,这里记录一下怎么在Centos7下添加开机自启动脚本和服务的方法. 1.添加开机自启服务 我这里以docker 服务为例,设置如下两 ...
- 数据库---JDBC的解析
一.JDBC是什么? JDBC:Java Database Connectivity(Java数据库连接池).指定了统一的访问各种关系型数据库的标准接口-----桥梁作用. 功能:[与数据库建立连接 ...