Obrazy nie ładują się na stronie internetowej

Question

Problem polega na tym, że gdy strona jest załadowana, czasami wyświetla wszystkie obrazy, czasami tylko 2 obrazy, a czasami wszystkie. Nie wiem, dlaczego tak się dzieje.

Wszelkie pomysły?

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

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

używam funkcji płótno, aby dodać trójkąt z wielowarstwowego efektu (jak Photoshop).

Answer 1

Upewnij się, że obrazy są ładowane:

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

Zawiń to wszystko w tym kodzie, aby upewnić się, że obrazy są załadowane przed wykonaniem skryptu. Po początkowym załadowaniu strony buforuje obrazy (przechowuje je w pamięci tymczasowej), ale nie przed renderowaniem wszystkich elementów. Po ponownym wczytaniu odczytuje obrazy z pamięci podręcznej - co jest znacznie szybsze niż ponowne pobieranie obrazów z serwera - i dlatego obrazy ładują się mniej więcej w tym samym czasie, co wszystko inne. Powoduje to widoczne obrazy.

Tak jak powiedziałem, aby strona działała, upewnij się, że wszystko jest załadowane, a następnie uruchom skrypt.

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