Предварительная Загрузка Изображений JavaScript

можете ли вы сказать мне, достаточно ли функции, которую я написал ниже, для предварительной загрузки изображений в большинстве, если не во всех браузерах, обычно используемых сегодня?

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

У меня есть массив imageURLs, который я зацикливаю и вызываю функцию preloadImage для каждого URL.

177
confirmation image javascript preload

8 ответов

да. Это должно работать на всех основных браузерах.

94

попробуйте это, я думаю, что это лучше.

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

источник:http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

36

CSS2 альтернатива: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: 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);
}

Примечание: изображения в контейнере с display:none может и не поджать. Возможно, видимость: скрытый будет работать лучше, но я не тестировал это. Спасибо Марко Дель Валье за указание на это

20

Я рекомендую вам использовать try / catch, чтобы предотвратить некоторые возможные проблемы:

ООП:

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

стандартные:

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

кроме того, хотя я люблю DOM, старые глупые браузеры могут иметь проблемы с использованием DOM, поэтому избегайте его вообще IMHO вопреки вкладу freedev. Image () имеет лучшую поддержку в старых браузерах мусора.

10

этот подход немного более сложный. Здесь вы храните все предварительно загруженные изображения в контейнере, может быть div. И после того, как вы можете показать изображения или переместить его в DOM в правильное положение.

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

попробуй здесь, Я также добавил несколько комментариев

9

в моем случае было полезно добавить обратный вызов к вашей функции для события onload:

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

а затем оберните его для случая массива URL-адресов к изображениям, которые будут предварительно загружены с обратным вызовом на все сделано: 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.src = url;
      img.onload = anImageLoadedCallback;
  }
}

// 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');
});
9

Да, это сработает, - браузеры ограничения(между 4-8) фактические вызовы и, следовательно, не кэшировать / предварительно загружать все нужные изображения.

лучший способ сделать это-вызвать onload перед использованием изображения следующим образом:

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

вот мой подход:

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