用jQuery预加载图像

#1 楼

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

评论

---

不需要将图像元素插入DOM来确保浏览器对其进行缓存吗？

– JoshNaro
2010年8月17日15:33

---

我相信$（''）只会在内存中创建一个图像元素（请参阅链接）。看起来'$（''）实际上会在隐藏的DIV中创建元素，因为它更加“复杂”。但是，我认为大多数浏览器都不需要这样做。

– JoshNaro
2011年2月11日15:30

---

那是编写jQuery插件的怪异方式。为什么不$ .preload（['img1.jpg'，'img2.jpg']）？

– alex
2012年1月17日在2:56

---

确保在$（window）.load（function（）{/ * preload here * /}）内调用此函数；因为这样可以首先加载文档中的所有图像，所以可能首先需要使用它们。

–贾斯珀·肯尼斯（Jasper Kennis）
2012年5月5日15:35

---

@RegionalC-为防止在设置加载事件之前完成加载图像，在设置src之前设置加载事件可能会更安全一些？ $（''）。load（function（）{/ *已加载！* /}）。attr（'src'，this）;

–备用字节
13年2月4日在22:01

---

#2 楼

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

#3 楼

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

#4 楼

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

#5 楼

$('<img src="img/1.jpg"/>');

#6 楼

$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

#7 楼

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

#8 楼

<img src="someimg.png" class="hide" alt=""/>

.hide{
display:none;
}

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

评论

---

有关此方法的更多信息，请参见：perishablepress.com/…

– gdelfino
2012年4月30日0:00在

---

但是，您需要意识到这种技术的主要缺点：在加载所有图像之前，不会完全加载页面。根据要预加载的图像数量及其大小，这可能需要一些时间。更糟糕的是，如果标记未指定高度和宽度，则某些浏览器可能会等到获取图像后再呈现页面的其余部分。

–user246645
13年2月1日在9:18

---

@Alex无论如何都需要加载img，您可以自由选择是否使用html加载它们，并避免任何形式的闪烁和一半加载的图像，或者如果您想获得更快的速度来获得一个不稳定的解决方案

–itsme
13年2月1日在9:46

---

我也真的认为用javascript创建html标签根本不可读，仅我的2美分

–itsme
13年2月1日在9:47

---

我需要一个非常复杂的项目的快速解决方案，就是这样。

–暴风雨
13年5月27日在8:14

---

#9 楼

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

#10 楼

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

#11 楼

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

#12 楼

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

#13 楼

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

#14 楼

#15 楼

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

#16 楼

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

#17 楼

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

评论

---

将此范围限定在传递给$ .each的回调中，并分配给要迭代的值。

–奥贝克
13年7月28日在8:13

---

？ $（['img1.jpg'，'img2.jpg'，'img3.jpg']）。each（function（index，value）{console.log（value）; // img1.jpg console.log（this） ; // String {0 =“ i”，1 =“ m”，2 =“ g”，更多...} $（''）。attr（'src'，this）.appendTo（' body'）。css（'display'，'none'）;}）;

– Whisher
13年7月29日在12:32

---

嗯我想你就在这里。例如$（“ div”）。each（function（i，el）{console.log（el == this）;}）;产生所有真理；数组迭代似乎表现出不同的行为。

–奥贝克
13年7月30日在18:59

---

#18 楼

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<img src="https://live.staticflickr.com/65535/50020763321_d61d49e505_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50021019427_692a8167e9_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020228418_d730efe386_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020230828_7ef175d07c_k_d.jpg" width="100" />

<div style="background-image: url(https://live.staticflickr.com/65535/50020765826_e8da0aacca_k_d.jpg);"></div>
<style>
    .bg {
        background-image: url("https://live.staticflickr.com/65535/50020765651_af0962c22e_k_d.jpg");
    }
</style>
<div class="bg"></div>

<div id="loadingProgress"></div>
 

 let backgroundImageArray = [];

function backgroundLoading(i) {

    let loadCount = 0;

    let img = new Image();
    $(img).on('load', function () {

        if (i < backgroundImageArray.length) {

            loadCount = parseInt(((100 / backgroundImageArray.length) * i));
            backgroundLoading(i + 1);

        } else {

            loadCount = 100;
            // do something when the page finished to load all the images
            console.log('loading completed!!!');
            $('#loadingProgress').append('<div>loading completed!!!</div>');

        }

        console.log(loadCount + '%');
        $('#loadingProgress').append('<div>' + loadCount + '%</div>');

    }).attr('src', backgroundImageArray[i - 1]);

}

$(document).ready(function () {

    $('*').each(function () {

        var backgroundImage = $(this).css('background-image');
        var putInArray = false;

        var check = backgroundImage.substr(0, 3);

        if (check == 'url') {

            backgroundImage = backgroundImage.split('url(').join('').split(')').join('');
            backgroundImage = backgroundImage.replace('"', '');
            backgroundImage = backgroundImage.replace('"', '');

            if (backgroundImage.substr(0, 4) == 'http') {
                backgroundImage = backgroundImage;
            }
            putInArray = true;

        } else if ($(this).get(0).tagName == 'IMG') {

            backgroundImage = $(this).attr('src');
            putInArray = true;

        }

        if (putInArray) {
            backgroundImageArray[backgroundImageArray.length] = backgroundImage;
        }

    });

    backgroundLoading(1);

});
 

#19 楼

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

#20 楼