在HTML中预载图像 [英] Preloading images in HTML

问题描述

我想预先加载这4张图片。我试过这个：

 < img src =img / 1.jpgstyle =display：none> 
< img src =img / 1a.jpgstyle =display：none> 
< img src =img / 1b.jpgstyle =display：none> 
< img src =img / 1c.jpgstyle =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方法适用于后台，但不适用于这些方面。
<尝试使用 $。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/]; //做图像加载时的东西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 （）;函数（错误）{console.log（错误）}）.always（function（）函数返回此this：函数（就绪）{loadImage（ready）; return this} {console.log（complete，urls.length）; return urls.length === complete？$（this）.data（complete，complete +images loaded）.dequeue（images）// all加载的图像：this}）; //记录错误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; //调用`loadImages`，//`this` context：`document` loadImages.call（document，images，$（ .image），complete）}）; $（document）.ready（function（）{//当所有图像加载时通知$（this）.queue（images，function（）{console.log（$（this）.data（））}）;} ）;

 < script src =https：// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><!--注意，不包括`src`属性 - >< img类=imagestyle =opacity：0.0alt =1>< img class =imagestyle =opacity：0.0alt =1a>< img class =imagestyle = opacity：0.0alt =1b>< img class =imagestyle =opacity：0.0alt =1c>  

div>

I want to preload these 4 images. I tried this:

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

It didn't work so I tried this instead:

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

The JS method worked with the background but not with these.

解决方案

Try utilizing $.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">

这篇关于在HTML中预载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！