イメージはウェブサイトにロードされません

Question

問題は、ページがロードされるとすべてのイメージを表示することがあります。なぜこのことが起こっているのか分かりません。

アイデア？

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

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

私は（Photoshopのような）乗効果を持つ三角形を追加するには、キャンバスの機能を使用しています。

Answer 1

イメージがロードされていることを確認します

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

スクリプトを実行する前に、イメージがロードされていることを確認するために、このコードをすべて入れてください。最初にページを読み込むと、イメージがキャッシュされます（一時メモリに格納されます）。ただし、すべての要素がレンダリングされる前には保存されません。リロードすると、キャッシュからイメージが読み込まれます。これは、サーバーからイメージを再度取得するよりもはるかに高速です。したがって、イメージは他のすべてのものとほぼ同じ時間に読み込まれます。これにより可視画像が得られます。

私が言ったように、あなたのページを動作させるには、すべてがロードされていることを確認してからスクリプトを実行してください。

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