Предварительная загрузка образа jQuery не работает в FireFox - PullRequest
Новая
       15

Предварительная загрузка образа jQuery не работает в FireFox

5 голосов
/ 10 декабря 2010

Я только что закончил собирать простую галерею jQuery с некоторыми затухающими переходами, как видно здесь .Все отлично работает во всех браузерах, за исключением того, что «предварительная загрузка изображений» не работает при первой загрузке в FireFox (работает во всех других браузерах).Изображения остаются с непрозрачностью 0% в Firefox.Не знаю, почему.

Вот код предварительной загрузки. 

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

Заранее благодарен за любую помощь.

Ответы [ 2 ]

3 голосов
/ 10 декабря 2010

Из любопытства попробуйте: 

$(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");
});
1 голос
/ 14 июня 2012

У меня есть вопрос по поводу вашего "исправления первой загрузки firefox".Я использую слегка измененный код, чтобы устранить описанную выше ошибку firefox в связи с 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'). Load (function ()" запускается. Я имею в виду, что когда событие не вызывается, потому что изображение поступило из кэша, мы не можем перехватить img "..load, потому что меня не уволят. Другие слова: Пожалуйста, объясните, что происходит, когда изображение поступает из кеша. Что в коде или событии «область» дает сбой?

ОБНОВЛЕНИЕ: www.ozeankreuzer.de по-прежнему происходит сбой при первой загрузке каждый день. Что не так? ошибка: document.body не определено: https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png

...