在之前的工作中,越大过这样的场景,在做banner图的时候,使用的定位,实现图片的淡入淡出和放大效果,
<!--html-->
<ul>
<li>
<a href="#"><img src="img/jd/banner061901.jpg"></a>
</li>
<li>
<a href="#"><img src="img/jd/banner061902.jpg"></a>
</li>
<li>
<a href="#"><img src="img/jd/banner061903.jpg"></a>
</li>
</ul>
但是在本地的看不出什么问题,但是在服务器上就能看出问题,其中li使用了定位,这是ul讲不继承li的高度,再加上页面是自适应,又不能给ul添加高度,所以要动态的计算其尺寸。
var time_img; // 定时器
var isLoaded = true; // 控制变量
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
$('.swipe ul').height($('.swipe img').css('height'));
});
$(window).resize(function(){
$('.swipe ul').height($('.swipe img').css('height'));
});
// 封装函数
function isImgLoad(callback){
$('.banner img').each(function(){
if(this.height === 0){
isLoaded = false;
return false;
}
});
if(isLoaded){
// isLoaded为true,没有发现为height=0的。加载完毕
clearTimeout(time_img); // 清除定时器
// 回调函数
callback();
}else{
//isLoaded为为false,因为找到了没有加载完成的图,将调用定时器递归
isLoaded = true;
time_img = setTimeout(function(){
isImgLoad(callback); // 递归扫描
},300); //设置扫描时间
}
}
ready是jquery封装的方法,只是表示页面的结构渲染完成,并不表示页面的资源被加载完成,而onload方法时原生的方法,指dom的生成和资源完全加载(比如图片等)出来后才执行
// HTML
<img id='bannerItem' src="http://www.whtlnet.com/uploadfile/ImgFile/2013-11/Img2013111300220767486.jpg">
//js
$(document).ready(function(){
//jquery
$('.bannerItem').load(function(){
// 加载完成
$('.swipe ul').height($('.swipe img').css('height'));
});
//原生 onload
var img = document.getElementById('bannerItem')
img.onload =img.onreadystatechange = function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
// 加载完成
$('.swipe ul').height($('.swipe img').css('height'));
}
};
})
new Promise((resolve, reject)=>{
let bannerItem= new Image()
bannerItem.src = 'http://www.whtlnet.com/uploadfile/ImgFile/2013-11/Img2013111300220767486.jpg'
bannerItem.onload = function(){
resolve(bannerItem)
}
}).then((bannerItem)=>{
//code
$('.swipe ul').height($('.swipe img').css('height'));
})
promise对象的all()方法
const imgarr = [
'http://www.whtlnet.com/uploadfile/ImgFile/2013-11/Img2013111300220767486.jpg',
'http://www.whtlnet.com/uploadfile/ImgFile/2013-04/Img2013041116301259095.jpg',
'http://www.whtlnet.com/uploadfile/ImgFile/2013-04/Img2013041116293911935.jpg'
];
//创建每个图片的promise对象
const promiseImgAllArr = [], imgAllarr = [];
for(let i = 0 ; i < imgarr.length ; i++){
promiseImgAllArr[i] = new Promise((resolve, reject)=>{
imgAllarr[i] = new Image()
imgAllarr[i].src = mulitImg[i]
imgAllarr[i].onload = function(){
//第i张加载完成
resolve(imgAllarr[i])
}
})
}
//将图片的promise对象的集合传给promise的all方法作为参数
Promise.all(promiseImgAllArr).then((img)=>{
//全部加载完成
$('.swipe ul').height($('.swipe img').css('height'));
})