1、递归监听多张图片,确保所有图片都已加载完成
var indexObj = (function () {
return {
init: function () {
var that = this;
// kv加载
that.kvSlide = $('.kv-swiper .swiper-slide')
that.srcList = []
that.srcIndex = 0
that.propName = 'pc-pad'
// 获取图片srcList
that.kvSlide.each(function () {
that.srcList.push($(this).find('.kv-img.' + that.propName).attr('src'))
})
that.imgLoadComplate(that.srcList[that.srcIndex])
},
imgLoadComplate: function (imgSrc) {
var _this = this
var _img = new Image()
_img.src = imgSrc
_img.onload = function () {
// 每张图片加载完成执行
if (_this.srcIndex < _this.srcList.length) {
_this.kvSlide.eq(_this.srcIndex).find('.text-container').show()
_this.srcIndex++
_this.imgLoadComplate(_this.srcList[_this.srcIndex])
}
// 判断是否最后一张图片加载完成
if(_this.srcIndex == _this.srcList.length - 1){
// ...
}
}
},
}
})()
$(function () {
indexObj.init()
})
2、同步监听多张图片,给每一张图片加载完成后执行对应语句
var indexObj = (function () {
return {
init: function () {
var that = this;
// kv加载
that.kvSlide = $('.kv-swiper .swiper-slide')
that.srcList = []
that.propName = 'pc-pad'
// 获取图片srcList
that.kvSlide.each(function () {
that.srcList.push($(this).find('.kv-img.' + that.propName).attr('src'))
})
// 给每一张图片都绑上监听函数
for (var i = 0; i < that.srcList.length; i++) {
that['_img' + i] = new Image()
that['_img' + i].src = that.srcList[i]
var callbackFn = function (index) {
that['_img' + index].onload = function () {
that.kvSlide.eq(index).find('.text-container').show()
}
}
callbackFn(i)
}
},
}
})()
$(function () {
indexObj.init()
})