MUI - 解决动态列表页图片懒加载再次加载不成功的bug

时间:2022-10-28 08:16:44

首先描述一下功能##

实现列表页动态加载

通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现。

http://www.cnblogs.com/phillyx/

然后说一下bug##

  1. 首次加载时图片可以获取成功,
  2. 再次加载失败,通过chrome调试发现img 的 data-lazyload 属性没改变
  3. 调试的时候发现了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;
}
  1. 问题找到了,那么就在再次加载数据时,清除该属性就ok了
  document.body.removeAttribute('data-imagelazyload');
mui(document).imageLazyload({
placeholder: '../../images/img_head3.png'
});

END##

那么问题来了:

为什么会这么考虑,还有其他的解决方案么?

最新的解决方案参考DCloud问答的官方回复

MUI - 解决动态列表页图片懒加载再次加载不成功的bug的更多相关文章

  1. MUI - 基于plus.downloader的图片懒加载功能,支持本地缓存

    基于plus.downloader的图片懒加载功能,支持本地缓存 简单说一下 在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的.我相信这对大多数的app都是强需求的. 怎么使 ...

  2. swift——启动页国际化:一步一步动态加载启动页图片,启动的时候加载文字

    由于公司的需求,要求做一个国际化的启动页,因为app我也弄国际化了,就剩下启动页国际化未完成,百度了呵谷歌了好多答案都不尽如人意,最后也是看见同事完成,我也问了具体的做法,决定分享给需要的人,免得和我 ...

  3. 通过freemarker生成一个word,解决生成的word用wps打开有问题的问题,解决出word时中文文件名乱码问题,解决打开出word时打开的word出现问题的问题,出图片,解决动态列表

     通过freemarker制作word比较简单 步骤:制作word模板.制作方式是:将模板word保存成为xml----在xml的word模板中添加相应的标记----将xml的word文件的后缀名 ...

  4. js打印html指定元素,解决动态获取的图片无法打印问题

    用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https ...

  5. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  6. 通过angularjs的directive以及service来实现的列表页加载排序分页

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  7. 通过angularjs的directive以及service来实现的列表页加载排序分页(转)

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  8. 爬虫之图片懒加载技术及js加密

    图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...

  9. 爬虫(七)图片懒加载技术、selenium和PhantomJS

    动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...

随机推荐

  1. 【Alpha】Daily Scrum Meeting第九次

    一.本次Daily Scrum Meeting主要内容 汇报情况. 上次提到的数据库字段问题,已经和合作队伍统一完毕. 在服务器上解析Json数据仍在解决中,现在直接使用手机发过去的数据进行解析. 二 ...

  2. Android Studio运行SlidingView报错 FloatMath函数

    1,错误信息时这样的(图片百度的,但是提醒的是一样的) 我们点击这个错误提示,就会跳到出错的地方 2,开始的时候觉得很蛋疼,因为这个SlidingView是从别处导过来的,没什么问题把...就很久就 ...

  3. GDC2016 【全境*】的全局照明技术

    现在全力支持公司的GAD平台了,很多的内部分享也可以放出来 http://gad.qq.com/article/detail/7159232

  4. 【Construct Binary Tree from Preorder and Inorder Traversal】cpp

    题目: Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume t ...

  5. ASP.Net 获取当前时间,包含各种时间格式

    在c# / ASP.net中我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间 ...

  6. tomcat源码分析(一)

    tomcat的启动从Bootstrap类的main方法开始. public static void main(String args[]) { //单例 if (daemon == null) { d ...

  7. [Swift]LeetCode914.一副牌中的X | X of a Kind in a Deck of Cards

    In a deck of cards, each card has an integer written on it. Return true if and only if you can choos ...

  8. 解题报告 『宝藏(Prim思想 + 访问顺序随机)』

    原题地址 本以为不过是一道Prim算法模版题,但貌似只能得45分,虽然对我这种蒟蒻来说已经够了. 然而同机房大佬表示可以用模拟退火A了此题,遂习之,终无所获. 然而机缘巧合之下习得了另一种随机算法,于 ...

  9. .NET Core 中正确使用 HttpClient 的姿势

    为了更方便在服务端调用 HTTP 请求,微软在 .NET Framework 4.x 的时候引入了 HttpClient.但 HttpClient 有很多严重问题,一直饱受诟病,比如 InfoQ 的这 ...

  10. 启动docker容器 防火墙问题报错 ! -i docker0' failed: iptables: No chain/target/match by that name.

    COMMAND_FAILED: '/sbin/iptables -t nat -A DOCKER -p tcp -d 0/0 --dport 8111 -j DNAT --to-destination ...