| |
|
|
| | Добрый день, подскажите пожалуйста как решить такую проблему.
Когда первый раз заходишь на сайт, он грузится по кусочкам. Так как было раскроено в фотошопе. Это происходит достаточно быстро, но тем не менее заметно. Можно ли это исправить каким-то образом?
(Познаний в верстке нет никаких, все делалось почти методом тыка)
Спасибо. | |
| |
|
|
| |
|
|
| |
для: Panterita
(02.11.2009 в 19:27)
| | | Здесь необходимо использовать так называемый прелоадер, т.е. предварительную загрузку изображения в кеш браузера.
В зависимости от решаемой задачи прелоадер может быть исполнен как на чистом HTML, так и на Javascript'e.
В вашем случае нужен скриптовой прелоадер.
Суть его работы такова:
1. Все "разрезанные" вами картинки изначально в HTML-коде должны иметь стиль "невидимости" и должны иметь на событии onload вызов функции, которая увеличивает изначально нулевой счетчик на единицу.
Кроме того, все эти "разрезанные" картинки должны иметь в HTML-коде какой-то отличительный признак, по которому можно узнать, что именно эта картинка из разряда "разрезанных". Например, можно дать всем картинкам какое-то одинаковое имя класса.
2. Когда все картинки браузером загрузятся и счетчик достигнет известного вам общего количества всех "разрезанных" картинок, та самая функция всем этим "разрезанным" картинкам изменит стиль с "невидимого" на "видимый" и все картинки "проявятся" одновременно.
Пример:
<html>
<head>
<script>
var Counter = 0; //счётчик обнулён
var TotalNumberOfImages = 234; //общее количество "разрезанных" картинок
var ImagesClassName = 'myClass'; //отличительный признак "разрезанных" картинок
function PreLoaderImage ()
{
if (++Counter == TotalNumberOfImages)
for (var obj = document.images, j = 0, len = obj.length; j < len; j++)
if (obj [j].className == ImagesClassName) obj [j].style.visibility = 'visible';
}
</script>
</head>
<body>
...
<img src="адрес" style="visibility: hidden" onload="PreLoaderImage ()" class="myClass" width="123" height="345">
<img src="другой" style="visibility: hidden" onload="PreLoaderImage ()" class="myClass">
<img src="третий" style="visibility: hidden" onload="PreLoaderImage ()" class="myClass">
...
<img src="последний (234-й)" style="visibility: hidden" onload="PreLoaderImage ()" class="myClass">
...
</body>
</html>
|
Примечание 1: Разумеется, у каждого тега <IMG> надо иметь прописанными атрибуты width и height, как в примере для первой картинки.
Примечание 2: Разумным будет (если это возможно по условиям вёрстки) поместить все "разрезанные" картинки в какой-то один контейнер (например, в <div id="myPanno">), тогда "отличительный признак" в виде одинакового имени класса можно не использовать, и можно будет перебирать не все теги <IMG> документа (как в примере), а лишь те, что находятся внутри этого контейнера. И код будет покороче, и исполняться будет побыстрее:
<html>
<head>
<script>
var Counter = 0; //счётчик обнулён
var TotalNumberOfImages = 234; //общее количество "разрезанных" картинок
function PreLoaderImage ()
{
if (++Counter == TotalNumberOfImages)
for (var obj = document.getElementById ('myPanno').getElementsByTagName ('img'), j = 0, len = obj.length; j < len; j++)
obj [j].style.visibility = 'visible';
}
</script>
</head>
<body>
...
<div id="myPanno">
<img src="адрес" style="visibility: hidden" onload="PreLoaderImage ()" width="123" height="345">
<img src="другой" style="visibility: hidden" onload="PreLoaderImage ()">
<img src="третий" style="visibility: hidden" onload="PreLoaderImage ()">
...
<img src="последний (234-й)" style="visibility: hidden" onload="PreLoaderImage ()">
</div>
...
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(03.11.2009 в 04:41)
| | | Спасибо большое за ответ. Пытаюсь это воплотить.
Прописала таким образом пока 8 кусочков. На предварительном просмотре само изображение (т.е. эти 8 кусков) пропали, остался только фон. И внизу так же появился кусок фона. Так и должно быть на данном этапе? или я что-то не так делаю?
Вот как это выглядит: http://s-s-vinogradov.narod.ru/try.html | |
| |
|
|
| |
|
|
| |
для: Panterita
(03.11.2009 в 19:56)
| | | "Прописан" у вас только один "кусок" - самый первый тег <IMG SRC="afisha01.jpg" ...> Именно в этом теге есть и style="visibility: hidden", и onload="PreLoaderImage ()", и class="myClass". Более в HTML-коде этих НЕОБХОДИМЫХ свойств я не нашёл.
А вы написали, что "прописали восемь кусков" ???
Где ещё семь? :-)
-----
Чтобы проверЯть работоспособность в процессе "прописки", устанавливайте значение переменной TotalNumberOfImages такое, сколько "кусков" уже "прописали".
Для всего одного "прописанного" тега <IMG SRC="afisha01.jpg" ...> надо устанавливать TotalNumberOfImages = 1;, для двух "прописанных" - TotalNumberOfImages = 2; и т.д.
А у вас прописано TotalNumberOfImages = 24; при всего одном вызове функции PreLoaderImage (). Картинки "проявятся" ТОЛЬКО ТОГДА, когда функция PreLoaderImage () вызовется TotalNumberOfImages раз. А она у вас сейчас вызывается всего только один раз. И скрипт ждёт, когда будет вызван ещё 23 раза. И никогда не дождётся" :-) | |
| |
|
|
| |
|
|
| |
для: АЯ
(03.11.2009 в 20:59)
| | | Это глюк народа вероятно. Не сохранилось ничего (((
Сейчас прописала все куски.
Результат вот получается: http://s-s-vinogradov.narod.ru/try.html
Что я не так сделала? :-( | |
| |
|
|
| |
|
|
| |
для: Panterita
(03.11.2009 в 23:41)
| | | Сравните ваше написание имени одной и той же переменной два раза (выделил жирно):
var TotalNumberOfImages = 43;
if (++Counter == TotalNumberofmages)
|
У вас в коде не одна и та же переменная, а ДВЕ - с разными именами.
Первая равна 43, а вторая - undefined (т.е. "не определена").
Javascript - язык регистрозависимый.
Имена переменных (объектов, свойств и методов) надо писать не только одинаковыми буквами, но и буквами в том же регистре.
"ДУРАК" не равно "дурак" и не равно "ДураК" - это три РАЗНЫХ дурака. А "ДУРА" (без пропущенной буквы "к") - это уже четвёртая по счёту будет. :-)
Аналогично ещё с одной переменной - сначала она у вас obj, а потом "чудесным образом" превращается в obg:
for (var obj = document.images, j = 0, len - obj.length; j < len; j++)
if (obg [j].className == ImagesClassName) obj [j].style.visibility = 'visible';
|
Подозреваю, что вы ещё не овладели ГЛАВНЫМ методом ЛЮБОГО (даже начинающего) пользователя интернета. Этот волшебный метод называется "копипастить" (от английского Copy&Paste). Если бы вы его применили (а не набивали бы на клавиатуре JS-код вручную одним пальцем по одному символу), то этих проблем не возникло.
---
Перечитайте в первом моём сообщении про "отличительный признак" - зачем он нужен?
Повторю: нужен он для того, чтобы картинки, которые надо "проявить", можно было "отличить" от всех прочих картинок страницы (которые "проявлять" не надо).
Вы же, извините, ТУПО сделали невидимыми абсолютно ВСЕ теги <IMG> своей страницы.
От чего тогда вы их "отличаете"? :-))
Поступили вы точно так, как и жена Али-бабы в сказке про её мужа и про сорок разбойников.
Разбойник пометил белым крестиком входную дверь дома Али-бабы, чтобы шайка ночью смогла отличить его дом от остальных. А жена Али-бабы, спасая мужа, пометила крестами ВСЕ двери ВСЕХ домов, чтобы дом Али-бабы не отличался ото ВСЕХ остальных :-) | |
| |
|
|
| |
|
|
| |
для: АЯ
(04.11.2009 в 01:02)
| | | В общем отчет:
1. опечатки исправлены. (Копипаст не использовала специально, дабы лучше запомнить и понять код. А не тупо пастить )).А набивала не одним, а всеми 10ью :-))) В общем сделала вывод, что лучше тупо пастить. )
2. перечитала в Вашем первом сообщении про "отличительный признак". Дошло. :-)
3. теги img сделаны невидимыми только у тех img, кот. нужны. т.е. у 19ти.
Результат: http://s-s-vinogradov.narod.ru/try.html
я, видимо, совсем безнадежный юзер (((( | |
| |
|
|
| |
|
|
| |
для: АЯ
(04.11.2009 в 01:02)
| | | АЯ, если Вы решили больше не помогать, напишите пожалуйста об этом, чтобы я не рассчитывала на Вашу помощь. Без обид совершенно. | |
| |
|
|
| |
|
|
| |
для: Panterita
(07.11.2009 в 00:49)
| | | Выискивать ваши опечатки мне неинтересно.
Такие как минус вместо знака равенства:
for (var obj = document.images, j = 0, len - obj.length; j < len; j++)
|
или многочисленные мутанты ("ячейко-картинки"):
<td img src="images/spacer.gif" width="1" height="78" alt=""></td>
|
И т.д... | |
| |
|
|
| |
|
|
| |
для: АЯ
(07.11.2009 в 03:18)
| | | Спасибо за ответ.
На самом деле некоторые "опечатки" по каким-то причинам не всегда сохраняются народом с первого раза. А про ячейко-картинки не достаточно знаний.
Вполне разумная мысль - нефиг тогда лезть в сайтоделание. Но, увы, нужно.
Спасибо большое за предыдущие корректировки. | |
| |
|
|
