Прелоад изображений
Делаете фотогалерею?
Тогда высока вероятность того, что вы столкнетесь с задачей предзагрузки изображений. В качестве примера рассмотрим сервис fotki.yandex.ru. При выборе фотографии на странице будет присутствовать небольшая линейка с превьюшками, которые можно прокручивать. Чтобы при прокрутке не возникало тормозов, необходимо заранее загрузить некоторое количество превью. Учимся это делать.
Способ первый - неправильный
Раньше автор активно пользовался таким вот способом прелоада, и даже рекомендовал его другим:
var image = new Image();
image.src = path;
return image;
}
Буквально на днях выснилось, что нормально работает он только в Gecko (Mozilla, Netscape, Firefox). То есть изображения действительно загружаются, срабатывают обработчики onload и о превью можно получить минимум данных, width/height, например. В остальных браузерах ничего подобного не происходит!
Способ второй - работающий
Удалось раздобыть кроссбраузерный способ прелоада изображений. Он не такой изящный, как предыдущий, зато работает:
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=\"") + "\" />";
} catch(e) {
// Error. Do nothing.
}
}
preload([
'http://2007.fastcoder.ru/pic/logo.gif',
'http://2007.fastcoder.ru/unsorted/ows.gif'
]);
В отличие от первого скрипта, данная функция принимает массив с УРЛ-ами превью, но можно её модернизировать на ваше усмотрение.
Способ третий - идеальный
Может вы предложите? ;-)
© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.