Доброго дня всем! Внес небольшие изменения в свой блог. Изменения не крупномасштабные, но заметно увеличивающие загрузку моего блога (https://promantic.ru/).
Дело было в следующем. Всегда при открытии блога, очень много времени уходило именно на загрузку логотипа и фона, то бишь бэкгроунда.
Я сделал небольшие изменения в порядке загрузки данных изображений. Теперь при открытии страницы загружается сам контент, а также маленькие изображение, а только потом уже и самые объемные изображения.
Сделал я это все с помощью JS (Java Srtipt) и CSS (Cascading Style Sheets).
Итак, начнем, для начала, с самой красивой части блога – логотипа.
Для того, чтобы управлять загрузкой изображения логотипа, необходимо присвоить ему уникальное имя (ID), что я и сделал:
<img id=“logo” border=“0“ />
Параметр ID задает уникальное имя, параметр BORDER управляет отображением рамки рисунка – у меня рамки нет (значение равно “0”).
Итак, имя мы задали, а что же дальше?
А дальше мы делаем следующее:
В самый конец нашего блога, то есть перед закрывающимся тегом </BODY> пишем несколько строк на JS:
<script>
document.getElementById(‘logo’).src=‘путь_до_картинки’;
</script>
Теперь немного объясним:
Берем наш документ (текущую загруженную страницу) – document, далее ищем элемент с именем LOGO – .getElementById(‘logo’), далее обращаемся к параметру src (источник картинки в данном случае) и присваиваем значение ‘путь_до_картинки’.
Таким образом, загрузка изображения происходит в самом конце. А в результате мы получаем ускорение в отображении контента.
Теперь приступим к фону. Тут дело обстоит похожим образом:
Для того, чтобы обращаться к параметру фонового изображения, необходимо задать элементу BODY имя -
<body id=“sitebody”>
Теперь переходим опять же к низу нашего документа, то есть к закрывающемуся тегу </BODY> и добавляем еще одну строчку кода на JS:
document.getElementById(‘sitebody’).style.backgroundImage=‘url(путь_до_картинки)’;
То есть, мы обращаемся к документу, ищем с нем элемент с именем SITEBODY, далее уже обращаемся к его стилю оформления getElementById(‘sitebody’).style, далее к параметру фонового изображения backgroundImage и присваиваем ему источник (URL) картинки.
В результате чего получаем вот такой скрипт
<script>
document.getElementById(‘toplogo’).src=‘путь_до_картинки’;
document.getElementById(‘sitebody’).style.backgroundImage=‘url(путь_до_картинки)’;
</script>
Все работает)
