onload - не успевает?
Приветствую! Есть небольшой вопросец по поводу обработки onload.
Имеем html: <html> <head> <script src="jquery-1.4.4.min.js"></script> <script src="scr.js"></script> </head> <body> <div class="mydiv"><img src=1.jpg ></div> </body> </html> и скрипт:
$(document).ready(function(){$('div.mydiv > img').one('load', function (){alert('!');});});
Проверяю только локально - без веб-сервера, всё грузится из локальной файловой системы. В таком виде все работает, но не совсем корректно. Если я открою локальную страницу в браузере - событие загрузки картинки не ловится. Делаю рефреш страницы - ловится. Насколько я понимаю, из-за большой скорости локальной загрузки (из кэша браузера?) и обработки, в первом случае просто не успевает повеситься обработчик на картинку до того как она загрузится. Единственное решение, которое мне пришло в голову - прописать вызов скрипта не в начале html, а перед закрывающим тегом body. И тогда в самом скрипте уже нужно другой код:
$('div.mydiv > img').one('load', function (){alert('!');});
если оставить предыдущий - событие не поймается вообще. Вопрос в том, корректно ли такое решение или есть другое? |
Цитата:
|
это вопрос? моя задача повесить обработчик на каждое изображение на событие load. в тексте я пояснил, что событие не всегда отлавливается, если реализовать первым способом.
|
первый способ реализовать неполучиться
неизвестно,что быстрее загруззиться-DOM или изображение |
а второй? можно ли гарантировать, что DOM загружен, а изображений нет, если вешать обработчики прямо в конце html-документа? разумеется, не через $(document).ready, иначе - опять потеря во времени?
|
Цитата:
Цитата:
|
Задумка была такова. В базе хранится большое количество статей, в которых изображения размещены так:
<div class="imageHolder"> <div>название</div> <img> <div>примечание</div> </div> Размеры слоев и изображений не указываются, поэтому я планировал повесить на загрузку изображений обработчик, который будет изменять размеры оберточного слоя в соответствии с вложенным изображением. Это позволит избавиться от ситуации, когда слой с примечанием или с названием шире самого изображения. Не видел смысла усложнять описание примера и специально сделал абстрактный. Собственно, какая разница. Меня интересуют тонкости решения проблемы в целом, а не другие варианты решения моей конкретной задачи. |
Я не исключаю, что есть возможность обойтись CSS средствами, но, не являясь специалистом по верстке, не смог найти подходящего решения.
Например, я пробовал так: <div style="width: 10px;"> <div style="width: 100%">текст текст текст текст текст текст текст текст текст текст</div> <img src="1.jpg"> <div style="width: 100%">текст текст текст текст текст текст текст текст текст текст</div> </div> Изображение, загружаясь растягивает основной слой, а вот два вложенных так и остаются. Вроде бы у них 100%, но они берутся от исходных 10px родительского, несмотря на то, что он растягивается позже. Могу конечно анализировать html средствами php и еще на сервере проставлять размеры для слоев, основываясь на размерах изображений. Но это тоже не вариант. |
В итоге, оба варианта, которые я описал в первом посте - работают. Но первый иногда пропускает событие загрузки картинок. Видимо потому что они успевают загрузится быстрее чем собирается DOM. Второй вариант работает всегда, но он мне не очень нравится. Поэтому я хотел уточнить - как еще решается этот вопрос.
|
Вариант 1. Повесить обработчик на window.onload, к этому моменту все изображения будут загружены.
Вариант 2. В конце html кода перебрать все изображения, проверить у них свойство complete, если оно true, то загружено, если false, то вешаем обработчик на событие load этого изображения. |
| Часовой пояс GMT +3, время: 06:51. |