Pré-carregando imagens com o jQuery

Estou procurando uma maneira rápida e fácil de pré-carregar imagens com JavaScript. Estou usando jQuery se isso é importante.

Eu vi isso aqui ( http: //nettuts.com ... ):

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

Mas, parece um pouco exagerado para o que eu quero!

Eu sei que existem plugins jQuery por aí que fazem isso, mas todos parecem um pouco grandes (em tamanho); Eu só preciso de uma maneira rápida, fácil e curta de pré-carregar imagens!

Rápido e fácil:

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'
]);

Ou, se você quiser um plugin jQuery:

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

// Usage:

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

Aqui está uma versão aprimorada da primeira resposta que realmente carrega as imagens no DOM e as oculta por padrão.

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

Use o objeto JavaScript Image .

Esta função permite ativar um retorno de chamada ao carregar todas as imagens. No entanto, observe que ele nunca acionará um retorno de chamada se pelo menos um recurso não estiver carregado. Isso pode ser facilmente corrigido implementando onerrorretorno de chamada e incrementando loadedvalor ou manipulando o erro.

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

JP, Depois de verificar sua solução, eu ainda estava tendo problemas no Firefox, onde ele não carregava as imagens antes de prosseguir com o carregamento da página. Eu descobri isso colocando alguns sleep(5)no meu script do lado do servidor. Eu implementei a seguinte solução com base na sua, que parece resolver isso.

Basicamente, adicionei um retorno de chamada ao seu plugin de pré-carregamento do jQuery, para que ele seja chamado depois que todas as imagens forem carregadas corretamente.

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

Fora de interesse, no meu contexto, estou usando isso da seguinte maneira:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

Espero que isso ajude alguém que chega a esta página do Google (como eu) procurando uma solução para pré-carregar imagens nas chamadas do Ajax.

Esse código jQuery de uma linha cria (e carrega) um elemento DOM img sem mostrá-lo:

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

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

O uso é bastante simples:

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

http://jsfiddle.net/yckart/ACbTK/

Eu tenho um pequeno plugin que lida com isso.

É chamado waitForImages e pode manipular imgelementos ou qualquer elemento com referência a uma imagem no CSS, por exemplo div { background: url(img.png) }.

Se você simplesmente deseja carregar todas as imagens, incluindo as referenciadas no CSS, eis como você faria isso :)

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

você pode carregar imagens em seu html em algum lugar usando a display:none;regra css e depois mostrá-las quando quiser com js ou jquery

não use funções js ou jquery para pré-carregar é apenas uma regra css versus muitas linhas de js a serem executadas

exemplo: Html

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

Css:

.hide{
display:none;
}

jQuery:

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

O pré-carregamento de imagens por jquery / javascript não é bom, pois as imagens levam alguns milissegundos para carregar na página + você tem milissegundos para o script ser analisado e executado, especialmente se forem imagens grandes, por isso é melhor também ocultá-las em hml para desempenho, porque a imagem é realmente pré-carregada sem ser visível, até você mostrar isso!

este plugin jquery imageLoader tem apenas 1,39kb

uso:

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

também existem outras opções, como se você deseja carregar as imagens de maneira síncrona ou assíncrona e um evento completo para cada imagem individual.

Uma maneira rápida e sem plug-ins de pré-carregar imagens no jQuery e obter uma função de retorno de chamada é criar várias imgtags ao mesmo tempo e contar as respostas, por exemplo

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. */
});
​    ​

Observe que se você deseja oferecer suporte ao IE7, precisará usar esta versão um pouco menos bonita (que também funciona em outros navegadores):

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

Obrigado por isso! Eu gostaria de acrescentar um pouco da resposta do JP - não sei se isso vai ajudar alguém, mas dessa forma você não precisa criar uma série de imagens e pode pré-carregar todas as imagens grandes, se quiser. nomeie seus polegares corretamente. Isso é útil porque eu tenho alguém que está escrevendo todas as páginas em html, e isso garante menos uma etapa para elas - eliminando a necessidade de criar a matriz de imagens e outra etapa em que as coisas podem estragar tudo.

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

Basicamente, para cada imagem na página, ele pega o src de cada imagem; se corresponder a determinados critérios (é um polegar ou imagem da página inicial), ele altera o nome (uma sequência básica substituída na imagem src) e carrega as imagens. .

No meu caso, a página estava cheia de imagens em miniatura, todas nomeadas como image_th.jpg, e todas as imagens grandes correspondentes são nomeadas image_lg.jpg. O polegar para grande substitui o _th.jpg por _lg.jpg e pré-carrega todas as imagens grandes.

Espero que isso ajude alguém.

    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*/
        }
    )

Eu uso o seguinte código:

$("#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";

Eu usaria um arquivo de manifesto para informar aos navegadores da web (modernos) que também carregassem todas as imagens relevantes e as armazenassem em cache. Use Grunt e grunt-manifest para fazer isso automaticamente e nunca mais se preocupe com scripts de pré-carregamento, invalidadores de cache, CDN etc.

https://github.com/gunta/grunt-manifest

Isso funciona para mim, mesmo no IE9:

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

Eu queria fazer isso com uma sobreposição personalizada da API do Google Maps. Seu código de amostra simplesmente usa JS para inserir elementos IMG e a caixa de espaço reservado para a imagem é exibida até a imagem ser carregada. Encontrei uma resposta aqui que funcionou para mim: https://stackoverflow.com/a/10863680/2095698 .

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

Isso pré-carrega uma imagem como sugerido anteriormente e, em seguida, usa o manipulador para anexar o objeto img após o carregamento do URL do img. A documentação do jQuery alerta que as imagens armazenadas em cache não funcionam bem com esse código de manipulador de eventos, mas está funcionando para mim no FireFox e Chrome, e não preciso me preocupar com o IE.

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

.attr('src',value) não .attr('src',this)

apenas para apontar :)

5 linhas em coffeescript

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

Para quem conhece um pouco do actionscript, é possível verificar o flash player, com o mínimo esforço, e criar um pré-carregador de flash, que também pode ser exportado para html5 / Javascript / Jquery. Para usar se o flash player não for detectado, verifique exemplos de como fazer isso com a função do youtube de volta ao html5 player :) E crie o seu. Eu não tenho os detalhes, porque ainda não comecei, se eu não me esquecer, publicarei mais tarde e tentarei algum código Jquery padrão para o meu.