画像の多くのプリロード、プリロード画面

Question

を停止し、私は20枚の写真をプリロードしようとしています。私はこのコードを書いていますが、それが動作するかどうかはわかりません。彼らはピクセル化しませんが、それらは点滅し、遅れて、奇妙に見えます。私が間違っていることは何ですか？

$(window).on("load", (function() { 
    PrepareImgs(); 
    console.debug('loaded'); 
})); 
var sectionArray = ["whoAreWe", "video", "web", "community", "charity"]; 
var imgArray = []; 
function PrepareImgs() { 
// console.debug("PrepareImgs started"); 
for (var i = 0; i < 5; i++) { 
    for (var j = 1; j <= 4; j++) { 
     var zdj = "Assets/Images/CroppedAndCleaned/" + sectionArray[i] + "/pp" + j + ".jpg"; 
     imgArray.push(zdj); 
    } 
} 
LoadImages(); 
} 

function LoadImages() { 
// console.debug("LoadImages started"); 
var i = 0; 
$(imgArray).each(function() { 
    // console.debug("loop started"); 
    var img = new Image(); 
    $(img).attr('src', imgArray[i]); 
    img.src=imgArray[i]; 
    console.debug(i); 
    // function preloadImage(url) 
    // { 
    //  var img=new Image(); 
    //  img.src=url; 
    // } 
    img.onload = function() { 
     console.debug("Internal loop started"); 
     i+=1; 

     if (i == $(imgArray).length) 
      HideLoader(); 
    } 
}); 
} 
function HideLoader() { 
// console.debug("HideLoader Started"); 
setTimeout(function() { 
    $('body').addClass('loaded'); 
}, 1); 
} 

Answer 1

は、イメージをロードし、一度、すべてのそれらのがロードされているDOMにそれらを追加し 、この例に従うようにしてください。

それはPromisesを使用しています。

function preloadImages(...images) { 
 

 
    return Promise 
 
    .all(
 
     images.map((src, i) => new Promise((resolve, reject) => { 
 
     src = `https://lorempixel.com/400/200/${src}/Image-Number-${i}`; 
 
     const img = $('<img />'); 
 

 
     return img 
 
      .attr('src', src) 
 
      .on('load',() => resolve(img)) 
 
      .on('error', reject) 
 
     })) 
 
    ) 
 
    ; 
 
}; 
 

 

 
preloadImages('sports', 'food', 'business', 'animals', 'nightlife', 'fashion') 
 
    .then(res => { 
 
    console.log('images loaded'); 
 
    
 
    return res.forEach($img => $img.appendTo('body')) 
 
    }) 
 
;

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