$ (»") .attr (" src ", что-то) .load () не поддерживается в IE <9? - PullRequest
2 голосов
/ 10 марта 2012

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': объект нулевой или неопределенный"

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

"SCRIPT5007: невозможно получить значение свойства slice: объект нулевой или неопределенный"
jquery.js, символ строки 2 32039

Что случилось?(Ненавижу IE ...)

Ответы [ 4 ]

3 голосов
/ 10 марта 2012

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

ex:

src="loremIpsum.jpg"

изменить на:

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

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

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

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

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

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

В 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

Редактировать:

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

0 голосов
/ 10 марта 2012

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

0 голосов
/ 10 марта 2012

Итак, я провел небольшое тестирование в 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>

Хотя некоторые идеи:

  1. Оберните любой скрипт в документеГолова, которая манипулирует DOM в вызове document.ready.

    $(document).ready(function(){ go(); });
    
  2. Поиск вашего исходного кода для этого вызова слайса.Если вы пытаетесь манипулировать коллекцией jQuery с помощью .slice (), она сломается.Коллекции jQuery - это объекты, а не массивы.(может быть, а может и не быть вашей проблемой)

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...