Czy funkcja, którą napisałem poniżej, jest wystarczająca, aby wstępnie załadować obrazy w większości, jeśli nie we wszystkich, przeglądarkach powszechnie używanych obecnie?

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

Mam tablicę adresów URL obrazów, które zapętlam i wywołuję preloadImagefunkcję dla każdego adresu URL.

Tak. Powinno to działać we wszystkich głównych przeglądarkach.

Spróbuj tego, myślę, że to jest lepsze.

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"
)

Źródło: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

W moim przypadku użyteczne było dodanie wywołania zwrotnego do funkcji onloadzdarzenia:

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

A następnie owiń go w przypadku tablicy adresów URL obrazów, które mają być wstępnie załadowane z wywołaniem zwrotnym na wszystkich, jest zrobione: 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 Alternative: 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 Alternative: https://perishablepress.com/preload-images-css3/ (H / T Linh Dam)

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

UWAGA: Obrazy w kontenerze display:nonemogą nie zostać wstępnie załadowane. Być może widoczność: ukryty będzie działał lepiej, ale tego nie przetestowałem. Dzięki Marco Del Valle za zwrócenie na to uwagi

Zalecam użycie try / catch, aby zapobiec niektórym możliwym problemom:

OOP:

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

Standard:

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

Ponadto, chociaż uwielbiam DOM, stare głupie przeglądarki mogą mieć problemy z używaniem DOM, więc unikaj go całkowicie IMHO w przeciwieństwie do wkładu Freedev. Image () ma lepszą obsługę w starych przeglądarkach śmieci.

To podejście jest nieco bardziej rozbudowane. Tutaj przechowujesz wszystkie wstępnie załadowane obrazy w kontenerze, może to być div. A po tym, jak możesz pokazać obrazy lub przenieść je w DOM do właściwej pozycji.

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;
}

Spróbuj tutaj , dodałem także kilka komentarzy

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)))

Tak, to zadziała, jednak przeglądarki się ograniczą (między 4-8) rzeczywiste połączenia, a tym samym nie będą buforować / ładować wstępnie wszystkich pożądanych obrazów.

Lepszym sposobem na to jest wywołanie onload przed użyciem obrazu w następujący sposób:

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;
}

Oto moje podejście:

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);
    }
};

Rozwiązanie dla przeglądarek zgodnych z ECMAScript 2017

Uwaga: zadziała to również, jeśli używasz transpilatora takiego jak Babel.

'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();

Mogłeś także poczekać na załadowanie wszystkich zdjęć.

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);
}

Lub użyj, Promise.allaby załadować je równolegle.

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);
}

Więcej o obietnicach .

Więcej informacji o funkcjach „Async” .

Więcej informacji na temat zadania restrukturyzacji .

Więcej informacji o ECMAScript 2015 .

Więcej informacji o ECMAScript 2017 .

Mogę potwierdzić, że podejście zawarte w pytaniu jest wystarczające, aby obrazy zostały pobrane i zapisane w pamięci podręcznej (chyba, że ​​przeglądarka zrobiła to za pomocą nagłówków odpowiedzi), przynajmniej:

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

Aby to przetestować, stworzyłem małą aplikację internetową z kilkoma punktami końcowymi, z których każdy śpi przez 10 sekund przed podaniem zdjęcia kota. Następnie dodałem dwie strony internetowe, z których jedna zawierała <script>tag, w którym każda z kociąt jest wstępnie załadowana za pomocą preloadImagefunkcji z pytania, a druga zawiera wszystkie kocięta na stronie za pomocą <img>tagów.

We wszystkich powyższych przeglądarkach stwierdziłem, że jeśli najpierw odwiedzę stronę modułu wstępnego ładowania, zaczekam chwilę, a następnie przejdę na stronę z <img>tagami, moje kocięta wyrenderują się natychmiast. To pokazuje, że moduł wstępnego ładowania pomyślnie załadował kocięta do pamięci podręcznej we wszystkich testowanych przeglądarkach.

Możesz sprawdzić lub wypróbować aplikację, której użyłem do przetestowania tego na https://github.com/ExplodingCabbage/preloadImage-test .

W szczególności zauważ, że ta technika działa w powyższych przeglądarkach, nawet jeśli liczba zapętlonych obrazów przekracza liczbę równoległych żądań, które przeglądarka jest skłonna wysyłać jednocześnie, w przeciwieństwie do sugestii Robina . Tempo, w jakim obrazy preload będzie oczywiście ograniczona jak wiele równoległych żąda przeglądarka jest gotowa do wysłania, ale to będzie ostatecznie wystąpić każdy adres URL obrazu, który nazywamy preloadImage()dalej.

Możesz przenieść ten kod do index.html, aby wstępnie załadować obrazy z dowolnego adresu URL

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

Przeglądarka będzie działać najlepiej za pomocą znacznika link w nagłówku.

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);
    });
}