javascript — предустановленные изображения мигают с разной скоростью

Question

javascript — предустановленные изображения мигают с разной скоростью

Я вызываю изображения из папки наугад и помещаю их в теги HTML img, используя функцию глобуса PHP.

Затем я использую JS, чтобы прочитать URL-адреса и перевернуть CSS-фоновое изображение div # wrapper, 300 мс для каждого изображения. Изображения должны быть предварительно загружены, так как они имеют теги HTML img. Они скрыты от пользователя с помощью следующего CSS (который не должен останавливать предварительную загрузку, как это делает «display: none»):

.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}

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

Мой JS выглядит так:

var slides = [];

$('.slide').each(function(index){
slides.push($(this).attr('id'));
});

var slide = 0;

function changeImage(){
if (slide < 10){
var currentSlide = $("#" + slides[slide]);
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-image', 'url("' + currentSlide.attr('src') + '")');
slide++
} else {
$('#headline').removeClass('visuallyhidden');
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-color', '#ef3308');
}
}

setInterval(changeImage, 300);

Сайт http://robertirish.com.

Есть ли лучший способ сделать это / кто-нибудь может объяснить, почему это происходит?

0

image javascript jquery php preloading

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

CSS:

#wrapper{
position: relative;
}

#wrapper img{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}

HTML:

<div id="wrapper">
<img src="image1.png">
<img src="image2.png">
<!--etc-->
</div>

JS:

$(document).on('ready', function(){
var images = [];
$("img", "#wrapper").each(function(){
images.push(this);
});

var timer = setInterval(function(){
if (images.length)
$(images.pop()).remove();
else
clearInterval(timer);
}, 300);
});

0