Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Задерженная смена фонового изображения массива. (https://javascript.ru/forum/misc/42829-zaderzhennaya-smena-fonovogo-izobrazheniya-massiva.html)

feniks7 11.11.2013 16:16

Задерженная смена фонового изображения массива.
 
Тут такое дело, имеется массив элементов 15 дивов с разными бг-имэйджами, мне нужно по очереди их брать с интервалом 0.5-1 секунды и менять им значения бг-имейджа. (урл самого изображения, размер и смещение по игерку).

делал так:

var arr2 = jQuery.makeArray($('.item'));
console.log(arr2);
var arr2_length = arr2.length;
console.log(arr2_length);
var j = 0;
var timer = setInterval(function() {
        if(j < (arr2_length - 1)) {
			console.log('sta');
			img2 = arr2[j].getAttribute('data-image');
			arr2[j].style.background = "img2 no-repeat 0 -100px";
			j++;
        } else {
            clearInterval(timer);
        }
    }, 1000);


но ничего не вышло, цикл идет, изображения не меняются...
Ах, да data-image - это как раз урл второй картинки.
Выглядит примерно так:
"url(/.../7486.jpg)"

BETEPAH 11.11.2013 16:23

Цитата:

Сообщение от feniks7
arr2[j].style.background = "img2 no-repeat 0 -100px";

может так?
arr2[j].style.background = img2 + " no-repeat 0 -100px";
Сделайте песочницу с кодом для наглядности и отладки

feniks7 11.11.2013 17:37

Благодарю, как всегда глупая ошибка...
Готовый вид у меня выглядит так:
/*Цикл с задержкой для подгрузки изображений*/
var arr2 = jQuery.makeArray($('.item'));
console.log(arr2);
var arr2_length = arr2.length;
console.log(arr2_length);
var j = 0;
var timer = setInterval(function() {
        if(j < (arr2_length - 1)) {
			console.log('sta');
			img2 = arr2[j].getAttribute('data-image');
			arr2[j].style.background = img2 + "no-repeat 0 -100px";
			arr2[j].style.backgroundSize = "100%";
			j++;
        } else {
            clearInterval(timer);
        }
}, 1000);


Все работает, по крайней мере в опере, хроме и осле.

Если кому интересно использовал для порциональной догрузки страницы. Ну тоесть у меня на странице 32 изображения, по требованиям должны быть сразу все. Но они тяжелые, я оптимизировал по максимуму с 6 МБ до 300-700кб. Вместо них грузятся изображения по 10-20кб и то изображение, котрое в данный момент смотрит юзер, вэто время по тихому запускается цикл этот самый и догружает фотки по очереди. Эффект получился неплохой, сильно снизилась скорость загрузки страницы, по тестам именно по изображениям примерно в 10-12 раз.


Часовой пояс GMT +3, время: 08:18.