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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Вот оно!

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

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

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

Ответ 5

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

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

Ответ 6

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