MUI 解决动态列表页图片懒加载再次加载不成功的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'

})

以上所述是小编给大家介绍的MUI

解决动态列表页图片懒加载再次加载不成功的bug问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

ajax设置async为同步，数据加载完成后再初始化indexlist

ajax()

var list = document.getElementById('list')

window.indexedList = new mui.IndexedList(list)

---