$ ( "<img/>" ). attr ( "src", что-то).load() не поддерживается в IE <9?

http://jsfiddle.net/DerekL/qDqZF/

$('<img/>').attr('src', "http://derek1906.site50.net/navbar/images/pic3.png").load(function() {
    $("body").html("done");
   blah blah blah...
})

Там я тестировал с помощью $("<img/>").load в IE 7, и я получил следующие:

Когда я нахожусь в адвокате, я получаю следующее:

"Невозможно получить значение свойства attr: object равно null или undefined"

При использовании на моей веб-странице я получаю следующее:

"SCRIPT5007: Невозможно получить значение свойства 'slice': object равно null или undefined"
jquery.js, строка 2, символ 32039

Что случилось? (Hate IE...)

Ответы

Ответ 1

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

Пример:

src="loremIpsum.jpg"

измените на:

src="loremIpsum.jpg?nocache=" + new Date().getTime()

Где "nocache" можно изменить на все, что имеет смысл для вас.

Из документа jQuery:

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

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

  • Он не работает последовательно и не надежно, кросс-браузер
  • В WebKit он не срабатывает корректно, если для изображения src установлено то же самое src, что и раньше.
  • Неправильно выворачивает дерево DOM
  • Может перестать запускаться для изображений, которые уже живут в кеше браузера "
    http://api.jquery.com/load-event/

Ответ 2

В IE событие загрузки не всегда срабатывает при кэшировании изображения. Попробуйте следующее:

var img = new Image();
img.src = "http://derek1906.site50.net//navbar/images/pic3.png";
if (img.complete || img.readyState === 4) {
    $("body").html("done");
}
else {
    $(img).on("load error onreadystatechange",function(e){
        if (e.type === "error") {
            $("body").html("Image failed to load.");
        }
        else {
            $("body").html("done");
        }
    });
}

Кроме того, не забудьте дождаться события DOMReady, иначе $("body") может еще не существовать, если изображение загружается достаточно быстро.

jsFiddle

Edit:

У меня есть плагин, который может помочь упростить предварительную загрузку изображений: https://github.com/tentonaxe/jQuery-preloadImages/

Ответ 3

Итак, я сделал небольшое тестирование в jfidde и вытащил соответствующий код и выполнил его автономно в ie7-8-9. Все они отлично справились. Я могу с уверенностью сказать, что это не тот фрагмент кода, который нарушает вашу страницу.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo by DerekL</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type='text/javascript'>
    $('<img/>').attr('src', "http://derek1906.site50.net//navbar/images/pic3.png").load(function() {
        $("body").html("done");
        $("<img/>").appendTo("body").attr("src","http://derek1906.site50.net//navbar/images/pic3.png");
    });
    </script>
</head>
<body>
    Loading...
</body>
</html>

Некоторые идеи:

  • Оберните любой script в заголовок документа, который манипулирует DOM в вызове document.ready.

    $(document).ready(function(){ go(); });

  • Найдите исходный код для этого вызова среза. Если вы пытаетесь манипулировать коллекцией jQuery с помощью .slice(), она сломается. Коллекции jQuery - это объекты, а не массивы. (может быть, а может и не быть вашей проблемой)

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

    $('<img id="me" />').attr('src', 'my.jpeg')
                    .load( function(){ $(this).appendTo("body"); } );
alert( $('#me').attr('src') );

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

Если вы вставляете остальную часть своего источника страницы, я могу взглянуть! Удачи!

Ответ 4

сначала добавьте событие загрузки, затем установите img'src
потому что, например, работайте так быстро, как когда вы установили src, событие "load" было закончено
 новый обработчик нагрузки будет выполнен следующим изменением