Немного об ускорении блога и о JS

картинка, новостная пиктограмма







Доброго дня всем! Внес небольшие изменения в свой блог. Изменения не крупномасштабные, но заметно увеличивающие загрузку моего блога (http://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>
Все работает)

Автор

Комментарии


  1. linux-beginner

    итак пишется слитно, уважаемый =))
  2. Promantic )

    Исправлено)

Комментарии

Поля обозначенные как * требуются обязательно. Перед постингом всегда делайте просмотр своего комментария.





← Старые Новые →