Bom dia a todos!

Gostaria de apresentar um script que eu desenvolvi para um pré-carregamento de imagens.

Este script faz um pre-carregamento tanto das imagens que estão no DOM quanto as que estão no css. Caso você tenha o plugin Firebug em seu Firefox, no console irá retornar algumas informações como quantas imagens foram localizadas, quais já foram carregadas, quais retornaram erros etc.

Um abraço a todos!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

// Preload automático de imagens
// Por Diego Marques
// Agência DMK
dmPreLoadImg = function(){
  dmLog = true;
  dmImgPreLoad = new Array();
 
  // Pega dados das tags imgs
  $("img").each(function(){
    dmRepetido = false;
    dmSrc = $(this).attr("src");
    $.each(dmImgPreLoad,function(pos,valor){
      dmRepetido = dmRepetido == true || dmSrc == valor ? true : false;
    });
    if(!dmRepetido) dmImgPreLoad.push(dmSrc);
  });
 
  // Pega dados dos css
  dmTotalCSS = $("link").length;
  dmTotalCSSok = 0;
  $("link").each(function(){
    caminhoCSS = $(this).attr("href");
    dmCaminho = "";
    dmNiveis = caminhoCSS.split("/");
    dmNiveis = dmNiveis.length > 1 ? dmNiveis.length - 1 : 0;
    if(dmNiveis > 0){
      for(i=0;i<dmNiveis;i++){
        dmCaminho += "../";
      }
    }
    $.ajax({
      url:caminhoCSS,
      success: function(retorno){
        retorno = retorno.split(/[()'"]/); // Comentario para consertar o syntax highlight: '
        $.each(retorno,function(pos,valor){
          dmRepetido = false;
          dmExtencao = valor.replace(/\s+/g," ");
          dmExtencao = dmExtencao.replace(/^ /,"");
          dmExtencao = dmExtencao.replace(/ $/,"");
          dmExtencao = dmExtencao.slice(dmExtencao.length-4).replace(".","");
          if(dmExtencao == "jpg" || dmExtencao == "jpeg" || dmExtencao == "gif" || dmExtencao == "png"){
            $.each(dmImgPreLoad,function(pos2,valor2){
              dmRepetido = dmRepetido == true || valor.replace(dmCaminho,"") == valor2 ? true : false;
            });
            if(!dmRepetido) dmImgPreLoad.push(valor.replace(dmCaminho,""));
          }
        });
        dmTotalCSSok++;
        dmCarregarImgs();
      }
    });
  });
 
  // Carregar Imagens
  dmCarregarImgs = function(){
    if(dmTotalCSSok == dmTotalCSS){
      if(window.console && dmLog) console.log("PreLoad Images - Desenvolvido por Diego Marques\n09/01/2008 - Agência DMK - http://www.agenciadmk.com.br/\nTotal de imagens: "+dmImgPreLoad.length);
      dmLoadImage = new Array();
      dmTotalCarregado = 0;
      dmTotalErro = 0;
      if(dmImgPreLoad.length > 0){
        for(i=0;i<dmImgPreLoad.length;i++){
          dmLoadImage[i] = new Image();
          dmLoadImage[i].onload = function(){
            dmTotalCarregado++;
            if(window.console && dmLog) console.log("Imagem: "+this.src+" - OK!");
            dmFinalizaPreload();
          }
          dmLoadImage[i].onerror = function(){
            dmTotalErro++;
            if(window.console && dmLog) console.log("ERRO AO CARREGAR IMAGEM: "+this.src+" !!!");
            dmFinalizaPreload();
          }
          dmLoadImage[i].src = dmImgPreLoad[i];
        }
        dmFinalizaPreload = function(){
          if(dmImgPreLoad.length == (dmTotalCarregado + dmTotalErro)){
            if(window.console && dmLog) console.log("PreLoad Concluído!\nTotal de imagens carregadas: "+dmTotalCarregado+"\nTotal de erros: "+dmTotalErro);
          }
        }
      }
    }
  }
}
dmPreLoadImg();