首页 > 代码库 > 图片预加载
图片预加载
Div.querySelector(‘.pic‘).onLoad=function(){
Div.style.left=arrLeft[minIndex]+‘px‘;
console.log(arrLeft[minIndex]+‘px‘);
Div.style.top=arrTop[minIndex]+‘px‘;
arrTop[minIndex]+=Div.offsetHeight+2*space;
i++;
(i<length)&&recue();
console.log(i);
}
图片加载完成了为什么不执行i++
function formatData(data){
var length=data.length;
var i=0;
~function recue(){
var minIndex=arrTop.indexOf(Math.min(...arrTop));
var item=data[i];
var Div=document.createElement(‘div‘);
Div.className=‘movie‘;
Div.style.top=Div.style.left=0;
Div.innerHTML=`
<a href="" target="_blank">
<img src="http://www.mamicode.com/${item.coverImg}" class="pic" width="200" height="auto" alt="${item.alt}"/>
</a>
<p class="year">
<i class="mll5">${item.year}</i>
<span class="mr15">${item.title}</span>
</p>
<p class="movie info">
<span class="title ml15"> ${item.original_title}</span>
<span class="score mr15">${item.score}</span>
</p>
`;
Container.appendChild(Div);
// Div.style.left=arrLeft[minIndex]+‘px‘;
// console.log(arrLeft[minIndex]+‘px‘);
// Div.style.top=arrTop[minIndex]+‘px‘;
// arrTop[minIndex]+=Div.offsetHeight+2*space;
// i++;
// if(i<length){
// recue()
// }
console.log(Div.querySelector(‘.pic‘));
Div.querySelector(‘.pic‘).onLoad=function(){
Div.style.left=arrLeft[minIndex]+‘px‘;
console.log(arrLeft[minIndex]+‘px‘);
Div.style.top=arrTop[minIndex]+‘px‘;
arrTop[minIndex]+=Div.offsetHeight+2*space;
i++;
(i<length)&&recue();
console.log(i);
}
}()
黑白灰(313941021) 11:24:05
function formatData(data){
var length=data.length;
var i=0;
~function recue(){
var minIndex=arrTop.indexOf(Math.min(...arrTop));
var item=data[i];
var Div=document.createElement(‘div‘);
Div.className=‘movie‘;
Div.style.top=Div.style.left=0;
Div.innerHTML=`
<a href="" target="_blank">
<img src="http://www.mamicode.com/${item.coverImg}" class="pic" width="200" height="auto" alt="${item.alt}"/>
</a>
<p class="year">
<i class="mll5">${item.year}</i>
<span class="mr15">${item.title}</span>
</p>
<p class="movie info">
<span class="title ml15"> ${item.original_title}</span>
<span class="score mr15">${item.score}</span>
</p>
`;
Container.appendChild(Div);
// Div.style.left=arrLeft[minIndex]+‘px‘;
// console.log(arrLeft[minIndex]+‘px‘);
// Div.style.top=arrTop[minIndex]+‘px‘;
// arrTop[minIndex]+=Div.offsetHeight+2*space;
// i++;
// if(i<length){
// recue()
// }
console.log(Div.querySelector(‘.pic‘));
Div.querySelector(‘.pic‘).onLoad=function(){
Div.style.left=arrLeft[minIndex]+‘px‘;
console.log(arrLeft[minIndex]+‘px‘);
Div.style.top=arrTop[minIndex]+‘px‘;
arrTop[minIndex]+=Div.offsetHeight+2*space;
i++;
(i<length)&&recue();
console.log(i);
}
}()
图片预加载