FireFox에서 jQuery 이미지가 미리로드되지 않습니다.

Question

here과 같이 페이딩 전환이 포함 된 간단한 jQuery 갤러리를 완성했습니다. 모든 것은 모든 브라우저에서 잘 작동합니다 - "이미지 미리로드"가 FireFox의 첫 번째로드에서는 작동하지 않는다는 점을 제외하고는 (다른 모든 브라우저에서 작동 함). 이미지는 파이어 폭스에서 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와 관련하여 위에서 설명한 Firefox 오류를 제거합니다.

$(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') .load (function() ')이 해고당하는 이유를 묻는다면 이미지가 캐시에서 가져 왔기 때문에 이벤트가 발생하지 않을 때'img ' 내가 해고되지 않기 때문에 .load 다른 단어 :..? 이미지가 캐시에서 올 때 어떻게되는지 설명해주십시오은 무엇 코드 나 이벤트 "영역"에

UPDATE 실패 : www.ozeankreuzer.de를 ?. 아직도 무엇이 잘못 되었나요 매일 첫 번째로드에 실패 오류는 다음과 같습니다는 document.body가 정의되어 있지 않습니다!. https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png