загрузить изображение перед скриптом

Question

У меня есть скрипт для изменения размера фонового изображения для каждой страницы.Бывает, что иногда на более медленных машинах и страницах с большим количеством контента (других изображений) фоновое изображение растягивается.

Изначально у меня было это

$(document).ready(function() {
    ...code for resizing the image...
});

, и я решил, что код этовыполняется сразу после загрузки изображения (с идентификатором img_bg), поэтому:

$("#img_bg").ready(function() {
  ...code for resizing the image...
});

Я получил лучшие результаты, но все еще не идеально, как я хотел.

Есть ли у кого-нибудь другие идеи??

Спасибо

Answer 1

Согласно документации jquery [1] .ready () действительно выполняется только после полной загрузки элемента.Таким образом, ваша проблема может заключаться в том, что есть определенное время, пока ваш скрипт изменения размера завершит свою работу.(особенно если другие вещи должны обрабатываться одновременно). Один из способов решить эту проблему - просто скрыть изображение, пока не будет выполнено изменение размера.Используйте функцию show [2] в конце вашего метода масштабирования и первоначально установите display="none" в вашем CSS для #img_bg для этой цели.

Однако вы должны думать о своем целомнастроить.Никогда не бывает умно загрузить большое изображение, а затем повторно изменить его с помощью javascript, если вы используете только меньшее.Тогда, возможно, было бы лучше изначально иметь меньшую (чтобы сохранить пропускную способность и, следовательно, увеличить скорость загрузки)

И другая мысль состоит в том, что это изменение размера, скорее всего, может быть достигнуто с умным использованием некоторого CSS вместо javascript,Но, следовательно, вам нужно будет предоставить более подробную информацию о том, как на самом деле работает ваш скрипт и что он делает.

[1] http://api.jquery.com/ready/

[2] http://api.jquery.com/show/

Answer 2

Если вы поместите код javascript сразу после элемента управления div / html, он все равно будет выполняться, когда элемент управления будет готов, вам не понадобится оператор «ready».

Document.ready просто означает, что весь HTML загружен, и вы можете делать с dom все, что угодно, но вы можете изменять элементы до того, как вся страница будет готова.