Как менять миниатюры без лагов?

Question

[Енот Енотов]

В общем сейчас вот так:

1,2,3,4 - имена файлов миниатюры, расширение всегда jpg

При наведении мышки на пост необходимо пролистывать миниатюры через таймер+
$(this).find('img').attr('src',src.replace(.............));
Но как реализовать так что бы пользователь не видел подгрузи картинок?
т.е. как сначала картинку подгрузить а потом уже впихнуть в src?

Answer 1

[iBird Rose]

1) грузить все не в одну картинку, а расположить сразу все 6 картинок под друг другом через position: absolute; и при ховере менять скриптом z-index. (у всех к примеру z-index: 0, а у первой 1 и менять)
2) также что и первый вариант, тока менять через visibility:hidden; (не путать с display:none; здесь картинка будет загружаться)
3) использовать слайдер. и через коллбэк методы настроить перелистывание на ховер (могу посоветовать slick slider. очень хорошо кастомизируется)

4) если хотите через прелоад, то вот код на jQ, который создает невидимый див и кидает туда все изображения которые вы хотите и загружает их. чтобы потом если они где то на странице всплывут - они уже будут загружены

<script type="text/javascript">
<!--
jQuery(document).ready(function(){

	// preload images
    preload([
		'path-to/img1.png',
		'path-to/img2.png'
		]);

function preload(images) {
    if (typeof document.body == "undefined") return;
    try {

        var div = document.createElement("div");
        var s = div.style;
		    s.position = "absolute";
        s.top = s.left = 0;
        s.visibility = "hidden";
        document.body.appendChild(div);
		div.innerHTML = "<img src=\"" + images.join("\" /><img src=\"") + "\" />";
		var lastImg = div.lastChild;
		lastImg.onload = function() { document.body.removeChild(document.body.lastChild); };
	 }
	 catch(e) {
        // Error. Do nothing.
	}
}
});
-->
</script>

Answer 2

[Енот Енотов]

Atllantis При наведении на этот item нужно пролистать 10 кадров (динамически сменить 10 jpg миниатюр через каждые 500 мс)
(примерно так же как на yotube сейчас)

Подгрузить можно одну только в src, но как подгрузить 9 остальных в фоне?
нужно это для того что бы не было пустоты во время смены картинок, т.е. 10 миниатюр надо грузануть как-то в фоне и у пользователя они уже должны быть в фоне.
Если заменять тупо через регулярку и подмену SRC , то у пользователя бывают глюки в виде полоски загрузки(так же как было в 2000 годах на модемном интернете :) )
Хочется сделать просто идеальный вариант, без глюков в прогрузке

ajax вроде подходит, но как сохранить картинки в переменную и внедрить в src?

Answer 3

[Atllantis]

т.е. как сначала картинку подгрузить а потом уже впихнуть в src?

Наоборот, сразу нужно в src впихнуть, чтобы картинка загрузилась и только потом показывать пользователю.