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

Question

Я хочу предварительно загрузить эти 4 изображения. Я попытался это:

<img src="img/1.jpg" style="display:none"> 
<img src="img/1a.jpg" style="display:none"> 
<img src="img/1b.jpg" style="display:none"> 
<img src="img/1c.jpg" style="display:none"> 

Это не сработало, так что я попытался это вместо:

new Image().src = "img/1.jpg"; 
new Image().src = "img/1a.jpg"; 
new Image().src = "img/1b.jpg"; 
new Image().src = "img/1c.jpg"; 

Метод JS работал с фоном, но не с ними.

Answer 1

Try используя $.Deferred(), .queue()

var images = ["http://lorempixel.com/1200/800/cats/" 
 
      , "http://lorempixel.com/1200/800/nature/" 
 
      , "http://lorempixel.com/1200/800/animals/" 
 
      , "http://lorempixel.com/1200/800/technics/" 
 
      ]; 
 
    // do stuff when image loaded 
 
    var loadImage = function loadImage(elem) { 
 
     return $(elem).fadeTo(500, "1.0", "linear"); 
 
    }; 
 
    
 
    // load images 
 
    var loadImages = function loadImages(urls, image, complete) { 
 
     // `this` : `document` 
 
     urls.forEach(function(imageSrc, i) { 
 
      var img = new Image; 
 
      var dfd = new $.Deferred(); 
 
      // return `this` : `document` 
 
      dfd.then(function(ready) { 
 
       loadImage(ready); 
 
       return this 
 
      }, function(error) { 
 
      console.log(error) 
 
      }) 
 
      .always(function() { 
 
      console.log(complete, urls.length); 
 
      return urls.length === complete 
 
        ? $(this) 
 
         .data("complete", complete + " images loaded") 
 
         .dequeue("images") // when all images loaded 
 
        : this 
 
    
 
      }); 
 
      // log errors 
 
      img.onerror = dfd.reject; 
 
      img.onload = function(e) { 
 
      complete = this.complete ? ++complete : complete; 
 
      dfd.resolveWith(document, [ 
 
       image.eq(i).prop("src", this.src) 
 
       ] 
 
      ); 
 
    
 
      }; 
 
      img.src = imageSrc 
 
      }); 
 
      // return `this` : `document` 
 
      return this 
 
    }; 
 
    
 

 
    $(window).load(function() { 
 
     // init `loadImages` 
 
     var complete = 0; 
 
     // call `loadImages`, 
 
     // `this` context : `document` 
 
     loadImages.call(document, images, $(".image"), complete) 
 
    
 
    }); 
 
    
 
    $(document).ready(function() { 
 
     // notify when all images loaded 
 
     $(this).queue("images", function() { 
 
      console.log($(this).data()) 
 
     });    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<!-- note , `src` attribute not included --> 
 
<img class="image" style="opacity:0.0" alt="1"> 
 
<img class="image" style="opacity:0.0" alt="1a"> 
 
<img class="image" style="opacity:0.0" alt="1b"> 
 
<img class="image" style="opacity:0.0" alt="1c">

Answer 2

Это фактически никогда не добавляет ничего к DOM, я использовал массив, чтобы ссылки из созданных образов, и передать их в качестве необязательного обратного вызова

var paths = [ 
    "img/1.jpg", 
    "img/1a.jpg", 
    "img/1b.jpg", 
    "img/1c.jpg" 
]; 

preloadImages(paths); 

function preloadImages(paths, callback) { 
    var images = []; 
    var loaded = 0; 

    paths.forEach(function (path) { 
     var img = new Image(); 
     img.src = path; 
     img.onload = onImagePreloaded; 
     images.push(img); 
    }); 


    function onImagePreloaded() { 
     loaded++; 
     if (loaded === paths.length && callback) { 
      callback(images); 
     } 
    } 
} 

Answer 3

Вместо установки самих изображений на display: none;, установите его на контейнер.

CSS:

.preload { 
    display: none; 
} 

HTML:

<div class="preload"> 
    <img src="img/1.jpg"> 
    <img src="img/1a.jpg"> 
    <img src="img/1b.jpg"> 
    <img src="img/1c.jpg"> 
</div>