Задерженная смена фонового изображения массива.
Тут такое дело, имеется массив элементов 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)" |
Цитата:
arr2[j].style.background = img2 + " no-repeat 0 -100px"; Сделайте песочницу с кодом для наглядности и отладки |
Благодарю, как всегда глупая ошибка...
Готовый вид у меня выглядит так: /*Цикл с задержкой для подгрузки изображений*/ 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. |