Как вызвать функцию после того, как документ готов и загрузка изображения? - PullRequest
Новая
       28

Как вызвать функцию после того, как документ готов и загрузка изображения?

6 голосов
/ 12 сентября 2011

Я использовал что-то вроде этого: 

$(document).ready(function() {
  $('#my-img').load(function() {
    // do something
  });
});

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

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

Есть мысли?

Ответы [ 2 ]

13 голосов
/ 12 сентября 2011

Взято из документации по нагрузке ()

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

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

Он не работает согласованно и надежно кросс-браузер

В WebKit не работает корректно, если для src изображения установлено то же значение src, что и раньше

Не правильно всплывает дерево DOM

**** Может перестать срабатывать для изображений, которые уже находятся в кеше браузера ****

Особенно последнее является распространенной проблемой.

Вы можете попробовать плагин imagesLoaded , но мне повезло с таким подходом: 

var element = $('#my-img');
$("<img/>").load(function () { //create in memory image, and bind the load event
    //do something
    //var imageHeight = this.height;
}).attr("src", element.attr("src"));
//set the src of the in memory copy after binding the load event, to avoid WebKit issues

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

1 голос
/ 05 января 2015

Старый вопрос, но может быть полезен для googlers: если вам нужен код для выполнения после загрузки изображений и изображения в DOM, вы должны использовать $ (window) .load вместо $ (document) .ready.Как в: 

$(window).load(function() {
    console.log("My image is " + $('#my-img').width() + " pixels wide.");
    // You may not have known this before the image had loaded
});

Это жизненно важно, если вы делаете jiggerypokery с SVG или другими вложенными документами.

...