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

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

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

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

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

какие мысли?

6
image javascript jquery onload

2 ответов

взято с документация по load ()

предостережения события 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

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

13

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

$(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 с SVGs или другими встроенными документами.

1