jQuery. FadeIn мерцание вызвано просмотра назад / вперед - PullRequest
Новая
       9

jQuery. FadeIn мерцание вызвано просмотра назад / вперед

0 голосов
/ 18 декабря 2011

Я использую следующий код для выцветания изображений: 

<script>
$(window).load(function(){
    $('.slides_control img').css('display', "none');
    $('.slides_control img').fadeIn(800);
});
</script>

Тем не менее, всякий раз, когда я перехожу назад / вперед, со своими ссылками или кнопками браузера назад / вперед, я склонен мерцать. Это случайно. При начальной загрузке это никогда не происходит.

Итак, мне нужно установить тайм-аут ..? Предотвратить кеширование ..? Или есть лучший метод ..?

Я также спрятал .slides_control img в моем файле CSS.

1 Ответ

0 голосов
/ 18 декабря 2011

Использование: 

$(window).load(function(){
    var $p = $('<p><a href="#">Refresh</a></p>').appendTo(document.body);
    $p.find('a').click(function(){
        window.location.reload();
        return false;
    });
    $('.slides_control img').css('display', "none");
    $('.slides_control img').fadeIn(800);
});

http://jsfiddle.net/fhF5E/

Мерцает при нажатии кнопки Обновить несколько раз подряд.

Использование: 

.slides_control img {
    display: none;
}

$(window).load(function(){
    var $p = $('<p><a href="#">Refresh</a></p>').appendTo(document.body);
    $p.find('a').click(function(){
        window.location.reload();
        return false;
    });
    $('.slides_control img').fadeIn(800);
});

http://jsfiddle.net/fhF5E/1/

Я не смог заставить его мигать один раз.

Даже это не мерцает: 

<div class="slides_control">
    <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG"/>
</div>
<script>$('.slides_control img').hide();</script>

$(window).load(function(){
    var $p = $('<p><a href="#">Refresh</a></p>').appendTo(document.body);
    $p.find('a').click(function(){
        window.location.reload();
        return false;
    });
    $('.slides_control img').fadeIn(800);
});

http://jsfiddle.net/fhF5E/3/

EDIT

После просмотра страницы, на которой была обнаружена проблема, обнаружилось, что display: none применяется к img таким образом, что при загрузке страницы селектор display: none ничего не выбирал, но затем было выбрано после был добавлен эффект ползунка (по готовности).

Итак ... 

.slides_control img {
    display: none;
}

Необходимо изменить на: 

.slider img {
    display: none;
}
...