Bilder werden nicht geladen

Question

Das Problem, das ich habe, ist, dass wenn die Seite geladen wird, manchmal alle Bilder angezeigt werden, manchmal nur 2 Bilder und manchmal alle. Ich weiß nicht, warum das passiert.

Irgendwelche Ideen?

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

to_canvas Funktion:

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

Ich verwende die Leinwand Funktion ein Dreieck mit Multiplikationseffekt (wie Photoshop) hinzuzufügen.

Answer 1

Stellen Sie sicher, die Bilder werden geladen:

$('#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

Verpacken Sie alles in diesem Code, um sicherzustellen, dass die Bilder geladen sind, bevor Sie Ihr Skript ausführen. Wenn Sie Ihre Seite zum ersten Mal laden, werden die Bilder zwischengespeichert (speichert sie im temporären Speicher), aber nicht bevor alle Ihre Elemente gerendert werden. Wenn Sie es erneut laden, liest es die Bilder aus dem Cache - was viel schneller ist als das erneute Abrufen der Bilder vom Server -, und daher laden die Bilder etwa zur gleichen Zeit wie alle anderen. Dies führt zu sichtbaren Bildern.

Wie gesagt, um Ihre Seite zum Laufen zu bringen, stellen Sie sicher, dass alles geladen ist, und führen Sie dann Ihr Skript aus.

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