jQuery: готовый документ срабатывает слишком рано для моих требований

Question

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

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

Мой вопрос: это вызовет какие-либо проблемы? И есть ли другие решения, которые я, возможно, пропустил?

Спасибо за помощь, ребята !!

Answer 1

Нет причины, по которой вы не можете использовать $(window).load(), а не $(document.ready(). Вы правы в том, что функция не срабатывает до тех пор, пока изображения не загрузятся полностью (или не загрузились).

Недостаток полной уверенности в $(window).load() состоит в том, что в некоторых случаях очевидно, что ни один из ваших javascript не работает (т.е. навигация или события клика ) до каждого отдельного элемента. на вашей странице загрузился. Некоторые пользователи, обычно опытные пользователи веб-сайта, довольно быстро переходят по страницам, что ухудшает общее впечатление от пользователей.

счастливая среда будет использовать $(window).ready() для большинства ситуаций и только помещают события в $(window).load(), которые в них абсолютно необходимы .

Answer 2

Попробуйте вместо этого:

$(window).load(function() {
 alert("images are loaded!");
});

См. Эту ссылку для сравнения $(document).ready() и $(window).load()

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

Хотя window.onload будет соответствовать вашим потребностям, я бы порекомендовал немного ускорить процесс:

$("img.load").load(function(){
    alert($(this).width());
});

Теперь вы можете обрабатывать изображение индивидуально так же быстро, как оно загружается и не дожидаясь полного набора элементов.

Answer 4

Вот очень простое решение:

Включите атрибуты width="" и height="" для всех изображений. Это заставит браузер отображать все правильно и на месте даже до загрузки изображений. Пространство, необходимое для каждого изображения в области страницы, будет правильно выделяться при загрузке изображений.

Вот и все!

Если вы сделаете это, document.ready будет отлично работать в вашем сценарии. Происходит то, что браузер не знает размер изображений до того, как они будут получены / загружены, поэтому браузер должен догадаться. Это может вызвать смешное поведение. Задание ширины и высоты ваших изображений решит эту проблему.

Я удивлен, что никто не упомянул это. Это не обязательно проблема javascript, хотя ответ cballou , безусловно, хороший совет.

В любом случае, надеюсь, вы узнали что-то новое. ;)

Answer 5

Если вы хотите отложить это на определенное время, возможно, вы можете использовать "setTimeout":)

Answer 6

Вы можете использовать событие load() в jquery , однако в документации упоминается, что оно может работать не так, как ожидалось, если элемент уже загружен.

Примечание: загрузка будет работать, только если вы установите ее до полной загрузки элемента, если вы установите ее после этого, ничего не произойдет. Этого не происходит в $ (document) .ready (), где jQuery обрабатывает его так, как ожидается, даже при установке после загрузки DOM. - http://docs.jquery.com/Events/load