foreach檢查圖像是否存在

Question

我需要在ajax返回的結果上進行foreach循環。 在執行foreach時，我正在對照每個記錄檢查圖像是否存在。

圖像存在代碼

function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
}

對於每個循環

 hotelImagesText = '<ul class="gallery list-unstyled cS-hidden" id="image-gallery">';
    $.each(hotelImagesArr, (index, item) => {
        imageExists(item, function(exists) {
            if (exists) {
                hotelImagesText += '<li data-thumb="'+hotelImagesArr[index]+'"> 
               <img src="'+hotelImagesArr[index]+'"></li>';
             }
    });
});
    hotelImagesText += '</ul>';

當我進行控制台操作時，它只會給我上面包含ul的字符串。 imageExists內部的字符串不連續。

Answer 1

這是因為，即使$.each是同步的， imageExists也並非如此，因此串聯發生得太遲了。

您可以做的是從后者返回Promise實例，並使用Promise.all 。

演示 ：

 function imageExists(url) { return new Promise(resolve => { const img = new Image(); img.onload = () => resolve(true); img.onerror = () => resolve(false); img.src = url; }); } const hotelImagesArr = [ 'https://www.sample-videos.com/img/Sample-jpg-image-50kb.jpg', 'https://www.sample-videos.com/img/Sample-jpg-image-100kb.jpg', 'https://stackoverflow.com/idonotexist.jpg' ]; let hotelImagesText = '<ul class="gallery list-unstyled cS-hidden" id="image-gallery">'; const checks = hotelImagesArr.map(url => imageExists(url)); Promise.all(checks).then(checksResults => { for (let i in checksResults) { if (checksResults[i]) { hotelImagesText += `<li data-thumb="${hotelImagesArr[i]}"><img src="${hotelImagesArr[i]}"></li>`; } } hotelImagesText += '</ul>'; console.log(hotelImagesText); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>