jQuery छवि प्रीलोड पहली बार फ़ायरफ़ॉक्स

Question

में काम नहीं करता है, मैंने here देखा के रूप में कुछ लुप्तप्राय संक्रमणों के साथ एक साधारण jQuery गैलरी को एक साथ डालना समाप्त कर दिया। सबकुछ सभी ब्राउज़रों में ठीक काम करता है - सिवाय इसके कि "छवि प्रीलोडिंग" फ़ायरफ़ॉक्स में पहले लोड पर काम नहीं करता है (अन्य सभी ब्राउज़रों में काम करता है)। छवियों में फ़ायरफ़ॉक्स में 0% अस्पष्टता रहती है। यकीन नहीं है कि क्यों।

यहां प्रीलोड कोड है।

$(document).ready(function(){ 
    //--------PRELOAD LOAD IMAGES--------\\ 
    $('img').load(function() { 
     //once image has loaded fade in image 
     $(this).animate({opacity : 1.0}, 1000); 

     //kill padding on last thumbnail of each line 
     $('#headshots img').eq(3).css({'padding-right' : '0'}); 
     $('#ports img').eq(3).css({'padding-right' : '0'}); 
     $('#ports img').eq(7).css({'padding-right' : '0'}); 
    }); 
}); 

किसी भी मदद के लिए अग्रिम धन्यवाद।

Answer 1

जिज्ञासा की बात के रूप में, कोशिश:

$(this).each(function() { 
    $(this).animate({opacity : 1.0}, 1000); 
}); 

अपने समाधान और अधिक मजबूत बनाने के लिए, आप स्थिति में प्रत्येक छवि के लिए आग की है कि यह ब्राउज़र द्वारा कैश किए गए लोड घटना के लिए मजबूर कर विचार करना चाहिए, जो इसकी लोड घटना को ट्रिगर करने से रोक सकता है। आप .complete संपत्ति के लिए परीक्षण कर ऐसा कर सकते हैं:

$('img').load(function() { 
    $(this).each(function() { 
     $(this).animate({opacity : 1.0}, 1000); 
    }); 
    $('#headshots img').eq(3).css({'padding-right' : '0'}); 
    $('#ports img').eq(3).css({'padding-right' : '0'}); 
    $('#ports img').eq(7).css({'padding-right' : '0'}); 
}).each(function() { 
    if(this.complete) $(this).trigger("load"); 
}); 

Answer 2

मैं अपने "फ़ायरफ़ॉक्स firstload ठीक" के बारे में कुछ सवाल है। मैं jquery flexslider के संबंध में उपरोक्त वर्णित फ़ायरफ़ॉक्स त्रुटि को खत्म करने के लिए थोड़ा बदल गया कोड का उपयोग करता हूं।

$(window).load(function() { 
    $('.flexslider').flexslider({ 
     animation: "fade",    //String: Select your animation type, "fade" or "slide" 
     slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" 
     slideshow: true,    //Boolean: Animate slider automatically 
     slideshowSpeed: 7000,   //Integer: Set the speed of the slideshow cycling, in milliseconds 
     animationDuration: 1500,   //Integer: Set the speed of animations, in milliseconds 
     directionNav: false,   //Boolean: Create navigation for previous/next navigation? (true/false) 
     controlNav: false,    //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage 
     controlsContainer: ".flex-container" 
    }); 
}); 

$(document).ready(function(){ 
    $('img').load(function() { 
     $(this).each(function() { 
      /*alert("each func");*/ 
      /*$(this).animate({opacity : 1.0}, 1000);*/ 
     }); 
    }).each(function() { 
     if(this.complete) { 
      //var src = $(this).attr("src"); 
      //alert(src); 
      $(this).trigger("load"); 
     }; 
    }); 
}); 

1. मैं इसे flexslider की स्थापना के बाद डाल दिया। क्या यह सही/अच्छा है?
2. मुझे यह नहीं पता कि यह कैसे काम करता है। आप समझते हैं कि यदि कोई छवि ब्राउज़र-कैश से निकलती है तो लोड इवेंट नहीं होगा। लेकिन फिर मैं घायल हो जाता हूं अगर "$ ('img') लोड (फ़ंक्शन()" निकाल दिया जाता है। मेरा मतलब है, जब ईवेंट को निकाल दिया नहीं जाता है क्योंकि छवि कैश से आई है, हम 'img' .load क्योंकि मैं सक्रिय नहीं होगा अन्य शब्द:।। कृपया व्याख्या क्या होता है जब एक छवि कैश से आता है कोड या घटना "क्षेत्र" में क्या विफल रहता है

अद्यतन: www.ozeankreuzer.de यह अभी भी प्रत्येक दिन पहले लोड पर विफल रहता है क्या गलत है त्रुटि है:।? document.body अपरिभाषित है:। https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png