वेबसाइट पर लोड नहीं हो रहा है

Question

मेरी समस्या यह है कि जब पृष्ठ लोड होता है तो कभी-कभी यह सभी छवियों को प्रदर्शित करता है, कभी-कभी केवल 2 छवियां और कभी-कभी सभी। मुझे नहीं पता कि यह क्यों हो रहा है।

कोई विचार?

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

मैं एक त्रिकोण (फ़ोटोशॉप) की तरह गुणा प्रभाव के साथ जोड़ने के लिए कैनवास फ़ंक्शन का उपयोग कर रहा हूँ।

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