Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Web-дизайн и web-программирование: статьи, скрипты


Web-дизайн и web-программирование

Здравствуйте, уважаемые подписчики!
Поздравляю вас с прошедшими новогодними праздниками! Желаю удачи во всех начинаниях и сил для реализации своих проектов.

Постзагрузка картинок

Источник: http://webobzor.net/

Очень часто на фото сайтах можно видеть превью картинок, при нажатии на которые отображается та же картинка, в полном размере без перезагрузки страницы.

Часто таких превью может быть более 20-30, и разумеется, если бы их оригиналы загружались вместе с уменьшенными копиями, такие страницы грузились бы минутами, если не больше. Достаточно посчитать, что картинка среднего размера занимает 100-200 Кбайт, и 20 подобных фото могут весить более 4 Мбайт.

Но есть достаточно оригинальный способ решения этой проблемы. Более двух лет назад я писал статью "Предзагрузка картинок" и теперь буду использовать подобный скрипт для реализации ПОСТзагрузки.

Весь код я выложу в отдельный архив, ссылку на который вы можете увидеть ниже. А вам я попытаюсь объяснить основную идею постзагрузки. Предположим у нас есть две превью картинки, при чем при нажатии на любую из них необходимо загрузить большое фото и отобразить его. Реализация следующая:

1. Получаем имя большой картинки и создаем новый объект pic:

var pic = new Image();
var timer;

function changePicture(pictureName) {

 pic = new Image();
 pic.src = "images/" + pictureName;
 timer = setTimeout("checkLoading()", 1000);

}

2. Создаем таймер, который будет через каждую секунду выполнять функцию checkLoading. Данная функция проверяет свойство объекта complete. Если оно равно true, значит фото было полностью загружено и его можно отобразить на странице:

function checkLoading() {

 if (pic.complete == true) {

  document.getElementById("ID картинки").src = pic.src;

 }

 else {

  timer = setTimeout("checkLoading()", 500);
 }
}

Вот и все. При помощи данного алгоритма можно, к примеру создать следующий эффект (Скачать код).

Вверх

Вопрос в рассылку

Здравствуйте!

Столкнулся со следующей проблемкой. На сайте в таблице размещена информация о различных фирмах:

ООО "Окна-Лидер"
Серпухов, ул.Крупской, д.6
Серпухов, ул.Физкультурная, д.16 (ДК им.Ленина)
76-06-95
8(926)160-62-77

Окна "Лира"
Серпухов, ул.Ворошилова, д.126 А (Дом быта, 4 этаж, офис 412)
31-17-78
8(926)255-74-84

и т.д.

Яндекс по запросу "8(926)160-62-77" выдает следующее:

Серпуховский каталог. Телефоны и адреса фирм и организаций Серпухова. Окна.
8(926)160-62-77. Окна "Лира" Серпухов, ул.Ворошилова, д.126 А (Дом быта, 4 этаж, офис 412)

т.е. искомый телефон, а за ним название уже следующей фирмы и ассоциируется соответствующим образом. Как это исправить?

Спасибо.

Сверстано так:

 .....
<TR>
  <TD>
    <FONT color=red face=Arial size=2><b>"Рамы" Окна ПВХ, стальные
двери</b>
    </FONT>
    <BR>
    <FONT class=text1 face=Arial size=2>ул.Ворошилова, д.13
    </FONT>
    <BR>
    <FONT face=Arial size=2>хх-хх-хх<BR>
                                       8(ххх)ххх-хх-хх
    </FONT>
    <BR>
  </TD>
</TR>

<TR>
  <TD>
     <FONT color=red face=Arial size=2><b>"Форточка" Окна ПВХ</b>
     </FONT>
     <BR>
     <FONT class=text1 face=Arial size=2>ул.Советская, д.7
     </FONT>
     <BR>
     <FONT face=Arial size=2>хх-хх-хх<BR>
                                        8(ххх)ххх-хх-хх
     </FONT>
    <BR>
   </TD>
 </TR>
 .......
Ответить

Вверх

Обновления сайта

С момента предыдущего выпуска раccылкина на сайт добавлены скрипты: Смена фона страницы, Фон страницы в cookie; статьи: «Что Xml грядущий нам готовит?», «Правила создания XML-документа». Добавлено 3 шаблона. Добавлена книга «Практическое введение в программирование на JavaScript».

Вверх


Вот и закончился очередной выпуск нашей рассылки. Вашу критику, вопросы, пожелания вы можете отправить на мой e-mail. До новых встреч!
Ведущий рассылки Алексей Голубев.

В избранное