Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2011, 12:35
Новичок на форуме
Отправить личное сообщение для bookworm Посмотреть профиль Найти все сообщения от bookworm
 
Регистрация: 13.01.2011
Сообщений: 8

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('!');});

если оставить предыдущий - событие не поймается вообще.

Вопрос в том, корректно ли такое решение или есть другое?
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2011, 13:29
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от bookworm
Вопрос в том, корректно ли такое решение или есть другое?
нет, что вы пытаетесь сделать
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2011, 14:40
Новичок на форуме
Отправить личное сообщение для bookworm Посмотреть профиль Найти все сообщения от bookworm
 
Регистрация: 13.01.2011
Сообщений: 8

это вопрос? моя задача повесить обработчик на каждое изображение на событие load. в тексте я пояснил, что событие не всегда отлавливается, если реализовать первым способом.
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2011, 15:05
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

первый способ реализовать неполучиться
неизвестно,что быстрее загруззиться-DOM или изображение
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2011, 16:16
Новичок на форуме
Отправить личное сообщение для bookworm Посмотреть профиль Найти все сообщения от bookworm
 
Регистрация: 13.01.2011
Сообщений: 8

а второй? можно ли гарантировать, что DOM загружен, а изображений нет, если вешать обработчики прямо в конце html-документа? разумеется, не через $(document).ready, иначе - опять потеря во времени?
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2011, 17:40
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от bookworm
это вопрос?
да это был вопрос, извиняюсь за невнимательность.
Сообщение от bookworm
моя задача повесить обработчик на каждое изображение на событие load
вы так и не ответили для чего вам это нужно, какая конечная цель?
Ответить с цитированием
  #7 (permalink)  
Старый 13.01.2011, 18:47
Новичок на форуме
Отправить личное сообщение для bookworm Посмотреть профиль Найти все сообщения от bookworm
 
Регистрация: 13.01.2011
Сообщений: 8

Задумка была такова. В базе хранится большое количество статей, в которых изображения размещены так:
<div class="imageHolder">
<div>название</div>
<img>
<div>примечание</div>
</div>

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

Не видел смысла усложнять описание примера и специально сделал абстрактный. Собственно, какая разница. Меня интересуют тонкости решения проблемы в целом, а не другие варианты решения моей конкретной задачи.
Ответить с цитированием
  #8 (permalink)  
Старый 13.01.2011, 19:08
Новичок на форуме
Отправить личное сообщение для bookworm Посмотреть профиль Найти все сообщения от bookworm
 
Регистрация: 13.01.2011
Сообщений: 8

Я не исключаю, что есть возможность обойтись CSS средствами, но, не являясь специалистом по верстке, не смог найти подходящего решения.

Например, я пробовал так:
<div style="width: 10px;">
<div style="width: 100%">текст текст текст текст текст текст текст текст текст текст</div>
<img src="1.jpg">
<div style="width: 100%">текст текст текст текст текст текст текст текст текст текст</div>
</div>


Изображение, загружаясь растягивает основной слой, а вот два вложенных так и остаются. Вроде бы у них 100%, но они берутся от исходных 10px родительского, несмотря на то, что он растягивается позже.

Могу конечно анализировать html средствами php и еще на сервере проставлять размеры для слоев, основываясь на размерах изображений. Но это тоже не вариант.
Ответить с цитированием
  #9 (permalink)  
Старый 13.01.2011, 19:11
Новичок на форуме
Отправить личное сообщение для bookworm Посмотреть профиль Найти все сообщения от bookworm
 
Регистрация: 13.01.2011
Сообщений: 8

В итоге, оба варианта, которые я описал в первом посте - работают. Но первый иногда пропускает событие загрузки картинок. Видимо потому что они успевают загрузится быстрее чем собирается DOM. Второй вариант работает всегда, но он мне не очень нравится. Поэтому я хотел уточнить - как еще решается этот вопрос.
Ответить с цитированием
  #10 (permalink)  
Старый 13.01.2011, 19:13
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Вариант 1. Повесить обработчик на window.onload, к этому моменту все изображения будут загружены.
Вариант 2. В конце html кода перебрать все изображения, проверить у них свойство complete, если оно true, то загружено, если false, то вешаем обработчик на событие load этого изображения.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Div onload over ajax mycoding AJAX и COMET 3 07.07.2010 09:41
slider не успевает за мышью goldmember Элементы интерфейса 8 24.02.2010 12:03
IE8, windows 2008 server. Не срабатывает onload у iframe bdiang Events/DOM/Window 4 29.08.2009 15:19
Подключение событий в onload и определение их типа anstm Events/DOM/Window 2 07.04.2009 15:20
Событие OnLoad у iframe в IE milk3dfx Events/DOM/Window 2 16.02.2009 22:09