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>

预加载大量图像，停止预加载屏幕

1 个答案: