是的。 这应当涉及所有主要浏览器。

我认为,这更好。

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

资料来源:。

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

And then wrap it for case of an array of URLs to images to be preloaded with callback on all is done: 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 );
});

const preloadImage = src => 
  new Promise((resolve, reject) => {
    const image = new Image()
    image.onload = resolve
    image.onerror = reject
    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)))

CSS2 Alternative: 。

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

NOTE: Images in a container with display:none might not preload. Perhaps visibility:hidden will work better but I have not tested this. Thanks Marco Del Valle for pointing this out

Working solution as of 2020

关于这一职位的大部分答复不再有效,(atleast on >)

我的解决办法是:

var cache = document.createElement("CACHE");
cache.style = "position:absolute;z-index:-1000;opacity:0;";
document.body.appendChild(cache);
function preloadImage(url) {
    var img = new Image();
    img.src = url;
    img.style = "position:absolute";
    cache.appendChild(img);
}

使用:

preloadImage("example.com/yourimage.png");

显然,<代码><cache>不是“界定的”内容,因此,如果你愿意,可使用<代码><div>。

在贵国社会保障局使用这一术语,而不是应用<代码> 字面 特性:

cache {
    position: absolute;
    z-index: -1000;
    opacity: 0;
}

cache image {
    position: absolute;
}

如经测试,请发表评论。

<>说明:

• Do NOT apply display: none; to cache - this will not load the image.
• Don t resize the image element, as this will also affect the quality of the loaded image when you come to use it.
• Setting position: absolute to the image is necessary, as the image elements will eventually make it s way outside of the viewport - causing them to not load, and affect performance.

UPDATE

在以上解决办法发挥作用的同时,我在此作了少量更新,以构建这一解决办法:

(现在也接受多种图像,其中一种功能)

var cache = document.createElement("CACHE");
document.body.appendChild(cache);
function preloadImage() {
    for (var i=0; i<arguments.length; i++) {
        var img = new Image();
        img.src = arguments[i];
        var parent = arguments[i].split("/")[1]; // Set to index of folder name
        if ($(`cache #${parent}`).length == 0) {
            var ele = document.createElement("DIV");
            ele.id = parent;
            cache.appendChild(ele);
        }
        $(`cache #${parent}`)[0].appendChild(img);
        console.log(parent);
    }
}

preloadImage(
    "assets/office/58.png",
    "assets/leftbutton/124.png",
    "assets/leftbutton/125.png",
    "assets/leftbutton/130.png",
    "assets/leftbutton/122.png",
    "assets/leftbutton/124.png"
);

<>>Preview:

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

在这里问:,我也补充了很少评论。

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

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

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

更多内容是。

更多关于“Async”职能。

。

)。

。

根据W3C RUS spec,你现在可以使用Java 这样的文字预先装载:

var link = document.createElement("link");
link.rel = "preload";
link.as = "image";
link.href = "https://example.com/image.png";
document.head.appendChild(link);

我的做法是:

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

是的,however browsers will limit(在4-8之间)实际电话,从而不掩饰/存储所有预期图像。

这样做的更好办法是在使用图像之前用上载荷:

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

我可以确认,有关做法足以引发将要下载和贴切的图像(除非你禁止浏览器通过您的回复负责人这样做),至少:

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

为了测试这一点,我做了一个小小的网络应用,每个终端点每秒10秒钟就睡觉,然后拍摄一个包裹。 然后,我增加了两页,其中一页载有<代码><script>的标签,其中每一页封顶均使用<代码>预先载荷。 图像从问题起的功能,other,其中使用<img>标签上的所有工具包。

在以上所有浏览器中,我发现,如果我先访问过顶顶页,等待时间,然后用<代码><img>标签,我的包裹立即投放。 这表明,在测试的所有浏览器中,散装机成功地将包裹装入了海滩。

您可以看到或尝试在

尤其注意到这一技术在上文浏览器中发挥作用,即使所拍摄的图像数量超过了当时浏览器愿意提出的平行要求的数量,这与will最终要求每个图像preloadImage()。

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

https://jsfiddle.net/sandîest/8k3mfz6t/7/"rel=“nofollow noreferer”>jsFiddle

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

function preloadImages() {
  const images = []
  for (var i = 0; i < arguments.length; i++) {
    images[i] = preloadImage(arguments[i])
  }
  return images
}

  //-- usage --//
const images = preloadImages(
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg",
  "http://domain.tld/gallery/image-003.jpg"
)

https://jsfiddle.net/sand chargeest/yjmgs1c4/8/”rel=“nofollow noreferer”>jsFiddle

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

function preloadImages(images) {
  for (var i = 0; i < images.length; i++) {
    images[i] = preloadImage(images[i])
  }
  return images
}

//-- usage --//
let arr = [
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg",
  "http://domain.tld/gallery/image-003.jpg"
]

const images = preloadImages(arr)
console.dir(images)

https://jsfiddle.net/sand chargeest/v21rmzqp/11/”rel=“nofollow noreferer”>jsFiddle

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

function preloadImages() {
  const images = []
  let c = 0
  for (var i = 0; i < arguments.length; i++) {
    if (Array.isArray(arguments[i])) {
      for(var arr = 0; arr < arguments[i].length; arr++) {
        if(typeof arguments[i][arr] ==  string ) {
            images[c] = preloadImage(arguments[i][arr])
            c++
        }
      }
    }
    else if(typeof arguments[i] ==  string ) {
      images[c] = preloadImage(arguments[i])
      c++
    }
  }
  return images
}

  //-- usage --//
var arr = [
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg"
]

const images = preloadImages(
  arr,
  "http://domain.tld/gallery/image-003.jpg",
  "http://domain.tld/gallery/image-004.jpg",
  [
      "http://domain.tld/gallery/image-005.jpg", 
      "http://domain.tld/gallery/image-006.jpg"
  ]
)

console.dir(images)

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/“rel=“nofollow noreferer”http://perishablepress.com/3-ways-preload-images-cs-javascript-ajax/