jQuery Prevent Загрузка одного и того же изображения два раза подряд

Question

jQuery Prevent Загрузка одного и того же изображения два раза подряд

0

Я использую хороший бит jQuery для создания эффекта угасания CSS на веб-сайте. Он работает очень хорошо. Но поскольку у него всего 4 изображения в массиве, он, скорее всего, загружает одно и то же изображение дважды подряд.

Что я могу добавить, чтобы предотвратить это?

Мой текущий код jQuery выглядит следующим образом:

// Playthrough Background Images
var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
]
var nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ")";

$('#header.home-page').css("background-image", nextBG);

setInterval(function(){
    nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ")";
    $('#header.home-page').fadeOut('fast', function() {
        $(this).css("background-image", nextBG).fadeIn('fast'); })
}, 4000); // 4 second interval

Заранее спасибо.

ура

StuBlackett 20 март 2014, в 14:23

Источник

0

Вы всегда можете повернуть эти изображения по порядку, а не случайно
Huangism 20 март 2014, в 13:16
0

Это тоже неплохой крик. Как я мог этого добиться?
StuBlackett 20 март 2014, в 13:19
1

Просто установите счетчик, начиная с 1, и увеличивайте его каждый раз, когда вы показываете изображение. Не забудьте сбросить счетчик до 1, когда вы достигнете 4. См. Ответ по friedi
Huangism 20 март 2014, в 13:25

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

1 ответ

Ещё вопросы

Вы всегда можете повернуть эти изображения по порядку, а не случайно
Это тоже неплохой крик. Как я мог этого добиться?
Просто установите счетчик, начиная с 1, и увеличивайте его каждый раз, когда вы показываете изображение. Не забудьте сбросить счетчик до 1, когда вы достигнете 4. См. Ответ по friedi

friedi · Accepted Answer · 2014-03-20T11-13-00.000Z

Вы можете показывать свои изображения один за другим (и повторяйте это все время):

var counter = 0;

// Playthrough Background Images
var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
]
var nextBG = "url(" + imgArray[counter] + ")";

$('#header.home-page').css("background-image", nextBG);

setInterval(function(){
    counter++;
    nextBG = "url(" + imgArray[counter % imgArray.length] + ")";
    $('#header.home-page').fadeOut('fast', function() {
        $(this).css("background-image", nextBG).fadeIn('fast'); })
}, 4000); // 4 second interval

или выберите случайным образом:

// Playthrough Background Images
var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
    'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
]
var current = Math.floor(Math.random() * imgArray.length);
var nextBG = "url(" + imgArray[current] + ")";

$('#header.home-page').css("background-image", nextBG);

setInterval(function(){
    var copy = imgArray.slice(0); // make copy
    copy.splice(current, 1); // remove current
    current = Math.floor(Math.random() * copy.length);
    nextBG = "url(" + copy[current] + ")";
    $('#header.home-page').fadeOut('fast', function() {
        $(this).css("background-image", nextBG).fadeIn('fast'); })
}, 4000); // 4 second interval

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