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

В общем сейчас вот так:
etSMz7kO.png
1,2,3,4 - имена файлов миниатюры, расширение всегда jpg

При наведении мышки на пост необходимо пролистывать миниатюры через таймер+
$(this).find('img').attr('src',src.replace(.............));
Но как реализовать так что бы пользователь не видел подгрузи картинок?
т.е. как сначала картинку подгрузить а потом уже впихнуть в src?
  • Вопрос задан
  • 147 просмотров
Решения вопроса 1
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
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>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@enot_enotov Автор вопроса
Atllantis При наведении на этот item нужно пролистать 10 кадров (динамически сменить 10 jpg миниатюр через каждые 500 мс)
(примерно так же как на yotube сейчас)

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

ajax вроде подходит, но как сохранить картинки в переменную и внедрить в src?
Ответ написан
Комментировать
@Atllantis
т.е. как сначала картинку подгрузить а потом уже впихнуть в src?

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы