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

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

2 голосов
/ 24 октября 2011

Я пытаюсь исчезнуть между двумя изображениями с помощью 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>

Ответы [ 3 ]

5 голосов
/ 24 октября 2011

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

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

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

Но не меняя ваш метод, вот как я убрал проблему мерцания.Переключите порядок изображений, добавляемых на страницу, чтобы они правильно складывались.и затем удалите дисплей: ни один из селектора 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;
}
2 голосов
/ 24 октября 2011

Чтобы предварительно загрузить изображения, просто поместите это в свою инициализацию (вам не нужно ждать, пока 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"

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

0 голосов
/ 24 октября 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...