Блог

Главная - Вопросы по программированию - Использование jQuery для предварительной загрузки изображений, чтобы не было мигания

Использование jQuery для предварительной загрузки изображений, чтобы не было мигания

#javascript #jquery #jquery-selectors

#javascript #jquery #jquery-селекторы

Вопрос:

Я пытаюсь исчезнуть между двумя изображениями с помощью jQuery. Когда я сделал это в первый раз, появилось мигание, когда крест изображения исчез в первый раз. Поэтому я попытался предварительно загрузить изображения до того, как произойдет затухание. Однако мерцание все еще есть. Ниже приведен упрощенный пример кода, который все еще мигает даже с предварительно загруженными изображениями (вы должны иметь возможность скопировать и вставить его и заставить его «просто работать», чтобы увидеть проблему). Как мне сделать так, чтобы не было мигания? Спасибо!

 <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">                                         

$(document).ready(function(){
    function preload(arrayOfImages) {
        var temp = $('<img>')
        temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png")
        $('#myGallery').prepend(temp)

        var temp = $('<img>')
        temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/003366.png")
        temp.attr("class", "active")
        $('#myGallery').prepend(temp)

        $(arrayOfImages).each(function(){
        });
    }

    preload();

    $('#switch').click(function(){
        swapImages()
    });

    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut("fast")
        $active.removeClass('active')
        $next.fadeIn("fast").addClass('active');
    }

});

</script>

<style>
    #myGallery{
      position:relative;
      width:100px;
      height:100px;
    }

    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }

    #myGallery img.active{
      display:block;
    }
</style>

</head>
<body>
  <div id="myGallery"></div>

<input type=button id=switch value=switch>
</body>
</html>

Редактировать

Я сделал предложение добавить

  var img1 = new Image();
 img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
 var img2 = new Image();
 img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"

на самом верху. Однако при первом выцветании цвет по-прежнему меняется с оранжевого на белый и синий, а не с оранжевого на синий. В следующий раз переход будет намного лучше с синего на оранжевый, и если вы снова нажмете на оранжевый на синий без кратковременного появления белого.

 <html>
 <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">                                         


var img1 = new Image();
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"


$(document).ready(function(){

    var temp = $(img1)
    $('#myGallery').prepend(temp)

    var temp = $(img2)
    temp.attr("class", "active")
    $('#myGallery').prepend(temp)

    $('#switch').click(function(){
        swapImages()
    });

    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut("fast")
        $next.fadeIn("fast").addClass('active');
        $active.removeClass('active')
    }

});

</script>

<style>
    #myGallery{
      position:relative;
      width:100px;
      height:100px;
    }

    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }

    #myGallery img.active{
      display:block;
    }
</style>

</head>
<body>
<div id="myGallery">
</div>
  <input type=button id=switch value=switch>
</body>
</html>

Комментарии:

1. Для устранения неполадок вы можете открыть папку, содержащую кэш браузера, и удалить изображения, чтобы начать с нуля. Полностью удалите / отключите ваш swap и загрузите страницу. Чтобы проверить, работает ли функция предварительной загрузки, проверьте кэш браузера, были ли загружены изображения.

Ответ №1:

Причина, по которой ваше 2-е изображение не загружается правильно, заключается в том, что для него было установлено значение display:none. Когда браузер видит это, он решает, что не стоит загружать изображение сразу. Как было предложено другими, предварительно загружайте изображение исключительно через javascript.

 var img = new Image();
img.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";

Вам никогда не нужно ссылаться на переменную img, чтобы использовать предварительно загруженное изображение, каждый раз, когда вы используете тот же URL-адрес изображения, браузер просто извлекает его из кэша.

Но, не меняя ваш метод, вот как я устранил проблему с миганием. Измените порядок добавления изображений на страницу таким образом, чтобы они правильно складывались в стопку. а затем удалите display:none из селектора img.

 $(document).ready(function(){
function preload(arrayOfImages) {


    var temp = $('<img>')
    temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/003366.png")
    temp.attr("class", "active")
    $('#myGallery').prepend(temp)

    var temp = $('<img>')
    temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png");
    $('#myGallery').prepend(temp)

    $(arrayOfImages).each(function(){
    });
}

preload();

$('#switch').click(function(){
    swapImages()
});

function swapImages(){

    var $active = $('#myGallery .active');
    var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');

    $active.fadeOut("fast")
    $active.removeClass('active')
    $next.fadeIn("fast").addClass('active');
}

});

css

 #myGallery img{
  position:absolute;
  top:0;
  left:0;
}

Комментарии:

1. Также нет необходимости возиться со visibility display свойствами or . Все изображения имеют position: absolute; top: 0; left: 0 свойства. Таким образом, они будут складываться, и будет показано последнее изображение. Поэтому только удаление display: none; из CSS должно устранить проблему. Рабочий пример

2. правда, мне нужно изменить порядок добавления изображений на страницу, чтобы получить правильный порядок. Спасибо, я отредактирую ответ.

3. Очень интересно! Интересно, что браузер на самом деле не загружает изображение, если он знает, что оно не будет отображаться. Анализирует ли он css перед загрузкой изображений? Большое вам спасибо за то, что разобрались в этом!

4. @AlexisK, когда документ загружается, он загружается сверху вниз, и DOM готов до полной загрузки изображений.

5. Также спасибо за помощь @kara!

Ответ №2:

Чтобы предварительно загрузить изображения, просто поместите это в свою инициализацию (вам не нужно ждать document.ready для запуска этого):

 var img1 = new Image();
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"

Это приведет к удалению изображений в кэш браузера, чтобы они быстро загружались, когда вы будете использовать их позже.

Комментарии:

1. Спасибо. Как мне затем получить доступ img1 img2 к ready функции и из нее?

2. К сожалению, это не предварительная загрузка изображения. Он мигает в первый раз независимо от того, загружено изображение предварительно или нет. Посмотрите сами , Это что-то еще, чего нам не хватает.

3. Вам не нужно открывать img1 и img2. Вы просто используете URL-адреса изображений, как обычно. Эта предварительная загрузка помещает изображения в кэш браузера, поэтому при обычном использовании они будут загружаться быстро. Я не знаю, почему вы выполнили свою функцию предварительной загрузки. Этого не требовалось. ВСЕ, что вам нужно было сделать, это добавить код, который у меня есть здесь. Вам не нужно было менять свой другой код. Это автоматически пошло бы на пользу.

4. @Alexis K — Я думаю, что теперь ваша проблема больше не в предварительной загрузке изображений, а в том, как работает ваш код. У меня сейчас нет времени разбираться с этим другим вопросом.

Ответ №3:

Посмотрите, что сказал jfriend00. Чтобы ответить на ваш последующий вопрос, вам не нужно ссылаться на объекты img1 и img2. Простое добавление другого изображения на страницу с тем же атрибутом src заставит браузер понять, что это изображение является ресурсом, который он уже загрузил, и он автоматически будет использовать предварительно загруженное изображение из своего кэша.

Метки: