Le immagini non si caricano sul sito web

Question

Il problema che ho è che quando la pagina viene caricata a volte visualizza tutte le immagini, a volte solo 2 immagini e, a volte tutte. Non so perché questo sta accadendo.

Qualche idea?

$('#banners .box img').each(function(index){ 
     var randval = (index+1)*100; 
     var _this = $(this) 
     setTimeout(function(){ 
      _this.attr('id' , 'banner' + index); 
      to_canvas('banner' + index, 300, 223); 
     }, randval) 
    }); 

funzione to_canvas:

function to_canvas(im,w,h){ 
     var canvas; 
     var imageBottom; 
     var im_w = w; 
     var im_h = h; 
     var imgData; 
     var pix; 
     var pixcount = 0; 
     var paintrow = 0; 
     var multiplyColor = [70, 116, 145]; 
     var x_offset = Math.floor(($('#'+im).attr('width') - im_w)/2); 
     var y_offset = Math.floor(($('#'+im).attr('height') - im_h)/2); 
     imageBottom = document.getElementById(im); 
     canvas = document.createElement('canvas'); 
     canvas.width = im_w; 
     canvas.height = im_h; 
     imageBottom.parentNode.insertBefore(canvas, imageBottom); 
     ctx = canvas.getContext('2d'); 
     ctx.drawImage(imageBottom, -x_offset , -y_offset); 
     imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
     pix = imgData.data; 
     for (var i = 0 ; i < pix.length; i += 4) { 
      if(pixcount > im_w - (im_h - paintrow)){ 
       pix[i ] = multiply(multiplyColor[0], pix[i ]); 
       pix[i+1] = multiply(multiplyColor[1], pix[i+1]); 
       pix[i+2] = multiply(multiplyColor[2], pix[i+2]); 
      } 
      if(pixcount < im_w-1){ 
       pixcount++; 
      }else{ 
       paintrow++; 
       pixcount = 0; 
      } 
     } 
     ctx.putImageData(imgData, 0, 0); 
     $('#'+im).remove(); 
    } 
    function multiply(topValue, bottomValue){ 
     return topValue * bottomValue/255; 
    } 

sto usando la funzione di tela per aggiungere un triangolo con effetto moltiplicare (come Photoshop).

Answer 1

assicurarsi che le immagini vengono caricate:

$('#banners .box img').each(function(index, elem){ 
    var randval = (index+1)*100, 
      self = this, 
      img = new Image(); // create image object 

    img.onload = function() {  // wait until it's loaded 
     setTimeout(function(){ 
      self.id = 'banner' + index; 
      to_canvas('banner' + index, 300, 223); 
     }, randval) 
    } 
    img.src = elem.src;   // set source to same as elem 
}); 

Answer 2

Avvolgere tutto in questo codice per assicurarsi che le immagini vengano caricate prima di eseguire lo script. Quando si carica la pagina inizialmente, memorizza nella cache le immagini (le memorizza nella memoria temporanea), ma non prima che tutti i tuoi elementi siano visualizzati. Quando ricarichi, legge le immagini dalla cache, che è molto più veloce del refleing delle immagini dal server, e quindi le immagini si caricano all'incirca nello stesso tempo di qualsiasi altra cosa. Ciò si traduce in immagini visibili.

Come ho già detto, per far funzionare la tua pagina, assicurati che tutto sia caricato, quindi esegui il tuo script.

$(window).load(function(){ 
    ...your scripts(you can exclude functions definitions from this scope) 
}