Aşağıda yazdığım işlev, günümüzde yaygın olarak kullanılan tarayıcıların çoğunda olmasa da, görüntülerin çoğunu önceden yüklemek için yeterli mi?

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

Ben döngü ve preloadImageher URL işlevi çağırmak bir dizi görüntü URL'leri var .

Evet. Bu, tüm büyük tarayıcılarda çalışmalıdır.

Bunu dene, bence bu daha iyi.

var images = [];
function preload() {
    for (var i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

//-- usage --//
preload(
    "http://domain.tld/gallery/image-001.jpg",
    "http://domain.tld/gallery/image-002.jpg",
    "http://domain.tld/gallery/image-003.jpg"
)

Kaynak: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Benim durumumda, onloadetkinlik için işlevinize bir geri arama eklemek yararlı oldu :

function preloadImage(url, callback)
{
    var img=new Image();
    img.src=url;
    img.onload = callback;
}

Ve sonra geri arama ile önceden yüklenecek resimlere bir dizi URL olması için sarın: https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){
    var loadedCounter = 0;
  var toBeLoadedNumber = urls.length;
  urls.forEach(function(url){
    preloadImage(url, function(){
        loadedCounter++;
            console.log('Number of loaded images: ' + loadedCounter);
      if(loadedCounter == toBeLoadedNumber){
        allImagesLoadedCallback();
      }
    });
  });
  function preloadImage(url, anImageLoadedCallback){
      var img = new Image();
      img.onload = anImageLoadedCallback;
      img.src = url;
  }
}

// Let's call it:
preloadImages([
    '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
  '//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
    console.log('All images were loaded');
});

CSS2 Alternatifi: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

body:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none; 
}

CSS3 Alternatifi: https://perishablepress.com/preload-images-css3/ (Y / T Linh Barajı)

.preload-images {
  display: none; 
  width: 0;
  height: 0;
  background: url(img01.jpg),
              url(img02.jpg),
              url(img03.jpg);
}

NOT: Bir kaptaki görüntüler display:noneönceden yüklenmeyebilir. Belki görünürlük: gizli daha iyi çalışır ama bunu test etmedim. Bunu işaret ettiği için Marco Del Valle'ya teşekkürler

Bazı olası sorunları önlemek için bir deneme / yakalama kullanmanızı öneririz:

OOP:

    var preloadImage = function (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Standart:

    function preloadImage (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Ayrıca, DOM'u sevdiğimde, eski aptal tarayıcıların DOM'u kullanmayla ilgili sorunları olabilir, bu yüzden freedev'in katkısının aksine IMHO'dan tamamen kaçının. Image () eski çöp tarayıcılarında daha iyi desteğe sahiptir.

Bu yaklaşım biraz daha detaylıdır. Burada önceden yüklenmiş tüm görüntüleri bir kapta saklarsınız, bir div olabilir. Ve görüntüleri gösterdikten veya DOM içinde doğru konuma taşıdıktan sonra.

function preloadImg(containerId, imgUrl, imageId) {
    var i = document.createElement('img'); // or new Image()
    i.id = imageId;
    i.onload = function() {
         var container = document.getElementById(containerId);
         container.appendChild(this);
    };
    i.src = imgUrl;
}

Burada deneyin , ayrıca birkaç yorum ekledim

const preloadImage = src => 
  new Promise(r => {
    const image = new Image()
    image.onload = r
    image.onerror = r
    image.src = src
  })


// Preload an image
await preloadImage('https://picsum.photos/100/100')

// Preload a bunch of images in parallel 
await Promise.all(images.map(x => preloadImage(x.src)))

Bu irade işi Evet, ancak tarayıcılar olacak sınırlamak gerçek aramaları (4-8 arasında) ve böylece istenen tüm görüntüleri önbelleğe almaz / önyüklemez.

Bunu yapmanın daha iyi bir yolu, görüntüyü aşağıdaki gibi kullanmadan önce onload çağırmaktır:

function (imageUrls, index) {  
    var img = new Image();

    img.onload = function () {
        console.log('isCached: ' + isCached(imageUrls[index]));
        *DoSomething..*

    img.src = imageUrls[index]
}

function isCached(imgUrl) {
    var img = new Image();
    img.src = imgUrl;
    return img.complete || (img .width + img .height) > 0;
}

İşte yaklaşımım:

var preloadImages = function (srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image;
        img.onload = function () {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
};

ECMAScript 2017 uyumlu tarayıcılar için çözüm

Not: Bu, Babel gibi bir transpiler kullanıyorsanız da işe yarayacaktır.

'use strict';

function imageLoaded(src, alt = '') {
    return new Promise(function(resolve) {
        const image = document.createElement('img');

        image.setAttribute('alt', alt);
        image.setAttribute('src', src);

        image.addEventListener('load', function() {
            resolve(image);
        });
    });
}

async function runExample() {
    console.log("Fetching my cat's image...");

    const myCat = await imageLoaded('https://placekitten.com/500');

    console.log("My cat's image is ready! Now is the time to load my dog's image...");

    const myDog = await imageLoaded('https://placedog.net/500');

    console.log('Whoa! This is now the time to enable my galery.');

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

runExample();

Ayrıca tüm görüntülerin yüklenmesini beklemiş olabilirsiniz.

async function runExample() {
    const [myCat, myDog] = [
        await imageLoaded('https://placekitten.com/500'),
        await imageLoaded('https://placedog.net/500')
    ];

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

Veya Promise.allparalel olarak yüklemek için kullanın .

async function runExample() {
    const [myCat, myDog] = await Promise.all([
        imageLoaded('https://placekitten.com/500'),
        imageLoaded('https://placedog.net/500')
    ]);

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

Promises hakkında daha fazla bilgi .

"Async" işlevleri hakkında daha fazla bilgi .

Yıkım ödevi hakkında daha fazla bilgi .

ECMAScript 2015 hakkında daha fazla bilgi .

ECMAScript 2017 hakkında daha fazla bilgi .

Sorudaki yaklaşımın indirilecek ve önbelleğe alınacak görüntüleri tetiklemek için yeterli olduğunu onaylayabilirim (tarayıcının yanıt başlıklarınız aracılığıyla bunu yapmasını yasaklamadıysanız):

• Chrome 74
• Safari 12
• Firefox 66
• Kenar 17

Bunu test etmek için, bir yavru kedi resmini sunmadan önce her biri 10 saniye uyuyan birkaç uç noktaya sahip küçük bir web uygulaması yaptım. Sonra iki web sayfasını ekledim, bunlardan biri <script>yavruların her birinin preloadImagesorudan gelen işlev kullanılarak önceden yüklendiği ve diğerinin<img> etiketleri kullanarak sayfadaki tüm yavru kedileri içeren bir etiketi içeriyordu .

Yukarıdaki tüm tarayıcılarda, önce ön yükleyici sayfasını ziyaret edersem, bir süre bekledim ve sonra <img>etiketlerle sayfaya gittim , yavru kedilerimin anında işlediğini buldum. Bu, önyükleyicinin, test edilen tüm tarayıcılarda yavruları önbelleğe başarıyla yüklediğini gösterir.

Bunu test etmek için kullandığım uygulamayı https://github.com/ExplodingCabbage/preloadImage-test adresinde görebilir veya deneyebilirsiniz .

Özellikle, bu tekniğin, döngülenmekte olan görüntü sayısı, Robin'in yanıtının aksine tarayıcının bir anda yapmak istediği paralel istek sayısını aşsa bile yukarıdaki tarayıcılarda çalıştığını unutmayın. . Resimlerinizin preload tabii kaç paralel tarafından sınırlı olacaktır hızdır tarayıcı göndermeye istekli olduğunu istekleri, ancak olacak sonunda aramak her resim URL'sini ister preloadImage()üzerinde.

Herhangi bir URL'den görüntüleri önceden yüklemek için bu kodu index.html dosyasına taşıyabilirsiniz

<link rel="preload" href="https://via.placeholder.com/160" as="image">

Tarayıcı, baştaki bağlantı etiketini kullanarak en iyi şekilde çalışır.

export function preloadImages (imageSources: string[]): void {
  imageSources
    .forEach(i => {
      const linkEl = document.createElement('link');
      linkEl.setAttribute('rel', 'preload');
      linkEl.setAttribute('href', i);
      linkEl.setAttribute('as', 'image');
      document.head.appendChild(linkEl);
    });
}