Предварительные изображения - отличный способ улучшить ваш пользовательский опыт. Изображения предварительно загружаются в браузер, и посетители могут плавно серфинг на вашем сайте и наслаждаться очень быстрой скоростью загрузки. Это очень полезно для галерей и веб -сайтов изображений, где изображения учитывают большую долю. Это гарантирует, что фотографии публикуются быстро и плавно, а также могут помочь пользователям получить лучший опыт пользователя при просмотре контента вашего веб -сайта. В этой статье будут использоваться три различные технологии предварительной загрузки для повышения производительности и удобства использования веб -сайта.
Метод 1: Используйте CSS и JavaScript для реализации предварительной загрузки
Есть много способов реализации предварительных изображений, включая использование CSS, JavaScript и различные комбинации двух. Эти технологии могут разработать соответствующие решения в соответствии с различными сценариями дизайна, которые очень эффективны.
Использование только CSS может легко и эффективно предварительно загружать изображения, а код следующим образом:
Кода -копия выглядит следующим образом:
#preload-01 {founly: url (http: //domain.tld/image-01.png) без повторного зареагирования -9999px -9999px; }
#preload-02 {founly: url (http: //domain.tld/image-02.png) без повторного зареагирования -9999px -9999px; }
#preload-03 {founal: url (http: //domain.tld/image-03.png) no-repeat -9999px -9999px; }
Применяя эти три селектора идентификатора к (x) HTML-элементу, мы можем предварительно загружать изображение на фона за вне экрана через фоновое свойство CSS. Пока пути этих изображений остаются прежними, браузер использует предварительно загруженные (кэш -) изображения во время рендеринга, когда их называют в другом месте на веб -странице. Простые, эффективные и не требуют никакого JavaScript.
Хотя этот метод эффективен, есть место для улучшения. Изображения, загруженные с использованием этого метода, загружаются вместе с другим содержанием страницы, увеличивая общее время загрузки страницы. Чтобы решить эту проблему, мы добавили немного кода JavaScript, чтобы отложить время предварительной загрузки, пока страница не будет загружена. Код заключается в следующем:
Кода -копия выглядит следующим образом:
// Лучшее предварительное загрузку изображения @ <a href = "http://perissablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/"> http://perisisblepress.com/press/2009/28/3-pelaud-images-cssscript--12/12/28/3-pelaud-images-csrax-javascripc preloader () {
if (document.getelementbyid) {
document.getElementById ("preload-01"). style.background = "url (http: //domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById ("preload-02"). style.background = "url (http: //domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById ("preload-03"). style.background = "url (http: //domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
функция addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} еще {
window.onload = function () {
if (oldonload) {
OldonLoad ();
}
func ();
}
}
}
addloadevent (предварительна);
В первой части сценария мы принимаем элемент, используя селектор классов и устанавливаем фоновое свойство для его предварительной загрузки разных изображений.
Во второй части этого скрипта мы используем функцию addloadevent (), чтобы отложить время загрузки функции preloader (), пока страница не будет загружена.
Что произойдет, если JavaScript не работает должным образом в браузере пользователя? Это очень просто. Изображение не будет предварительно загружено. Когда страница вызовет изображение, она будет отображаться нормально.
Метод 2: Используйте только JavaScript для реализации предварительной загрузки
Приведенный выше метод иногда очень эффективен, но мы постепенно обнаруживаем, что в реальной реализации занимает слишком много времени. Вместо этого я предпочитаю использовать Pure JavaScript для предварительных нагрузочных изображений. Ниже приведены два таких метода предварительной загрузки, которые могут прекрасно работать на всех современных браузерах.
Сегмент кода JavaScript 1
Его легко реализовать, просто редактируя и загрузив путь и название требуемого изображения:
Кода -копия выглядит следующим образом:
<div>
<script type = "text/javascript">
<!-//-> <! [Cdata [//> <!-var Images = new Array ()
функция preLoad () {
for (i = 0; i <preload.arguments.length; i ++) {
Images [i] = New Image ()
Изображения [i] .src = preload.arguments [i]
}
}
предварительная нагрузка (
"http: //domain.tld/gallery/image-001.jpg",
"http: //domain.tld/gallery/image-002.jpg",
"http: //domain.tld/gallery/image-003.jpg"
)
//-> <!]]> </script>
</div>
Этот метод особенно подходит для предварительной загрузки большого количества изображений. Мой веб -сайт Gallery использует эту технологию и имеет более 50 предварительно загруженных изображений. Примените скрипт на страницу входа в систему, и пока пользователь входит в учетную запись входа, большинство изображений галереи будут предварительно загружены.
JavaScript фрагмент 2
Этот метод похож на приведенный выше метод, а также может предварительно загружать любое количество изображений. Добавьте следующий скрипт на любую веб -страницу и отредактируйте его в соответствии с инструкциями по программе.
Кода -копия выглядит следующим образом:
<div>
<script type = "text/javascript">
<!-//-> <! [Cdata [///> <!-if (document.images) {
img1 = новое изображение ();
img2 = новое изображение ();
img3 = новое изображение ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
//-> <!]]> </script>
</div>
Как видно, каждая загрузка изображения требует создания переменной, такой как «img1 = new Image ();» и объявление адреса источника изображения, такое как "IMG3.SRC =
"../path/to/image-003.gif"; ". См. Этот режим, вы можете загрузить столько фотографий, сколько захотите.
Мы снова улучшили этот метод. Инкапсулируйте сценарий в функцию и используйте addloadevent (), чтобы отложить время предварительной нагрузки, пока страница не будет загружена.
Кода -копия выглядит следующим образом:
function preloader () {
if (document.images) {
var img1 = новое изображение ();
var img2 = новое изображение ();
var img3 = новое изображение ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
}
функция addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} еще {
window.onload = function () {
if (oldonload) {
OldonLoad ();
}
func ();
}
}
}
addloadevent (предварительна);
Метод 3: Используйте Ajax для реализации предварительной загрузки
Приведенный выше метод кажется недостаточно крутым, поэтому теперь давайте посмотрим на метод, который использует Ajax для реализации предварительной загрузки изображений. Этот метод использует DOM, не только предварительные нагрузки, но также предварительно загружает CSS, JavaScript и другие связанные вещи. Использование AJAX лучше, чем использование JavaScript напрямую, преимущество заключается в том, что загрузка JavaScript и CSS не повлияет на текущую страницу. Этот метод прост и эффективен.
Кода -копия выглядит следующим образом:
window.onload = function () {
settimeout (function () {
// xhr запросить JS и CSS var xhr = new xmlhttprequest ();
xhr.open ('Get', 'http: //domain.tld/preload.js');
xhr.send ('');
xhr = new xmlhttprequest ();
xhr.open ('get', 'http: //domain.tld/peload.css');
xhr.send ('');
// предварительное изображение New Image (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Приведенный выше код предварительно загружен с помощью "preload.js", "preload.css" и "preload.png". 1000 миллисекундной тайм -аут предназначен для предотвращения подвешивания сценария, что вызывает функциональные проблемы на нормальной странице.
Ниже давайте посмотрим, как реализовать процесс загрузки с помощью JavaScript:
Кода -копия выглядит следующим образом:
window.onload = function () {
settimeout (function () {
// Ссылка на <Head>
var head = document.getElementsbytagname ('head') [0];
// новый CSS
var css = document.createElement ('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "http: //domain.tld/preload.css";
// новый JS
var js = document.createElement ("script");
js.type = "text/javascript";
js.src = "http: //domain.tld/preload.js";
// предварительная загрузка JS и CSS Head.AppendChild (CSS);
Head.AppendChild (JS);
// предварительное изображение
новое изображение (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Здесь мы создаем три элемента через DOM для реализации предварительной загрузки трех файлов. Как упомянуто выше, с Ajax файл загрузки не применяется на странице загрузки. С этой точки зрения метод AJAX превосходит JavaScript.
Хорошо, эта статья будет представлена здесь. Каждый уже понял три метода реализации технологии предварительной загрузки изображений. Какой из них более эффективен? Я думаю, что друзья также видели это, поэтому примените его к своим собственным проектам.