图片预加载

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="${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="${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);
}
}()