Ширина изображения соответствует нулю при загрузке в кеше - PullRequest
Новая
       22

Ширина изображения соответствует нулю при загрузке в кеше

4 голосов
/ 27 января 2012

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

Моя проблема:

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

Мой код: 

var oImage = new Image();

oImage.src = 'http://mydomain.com/image.png';

container.html(oImage);

oImage.onload = function(){

    alert(this.width);
}

** Обновление **

@ Алекс: Это код, который я пробовал с вашим плагином, я полагаю, что я, вероятно, что-то делаю не так. Я бы хотел, чтобы это работало, потому что ваш плагин выглядит неплохо. 

container.waitForImages(function() {

    var cWidth = $(this).width();

    alert("width: "+cWidth); // returns 0 - works first time but not cached

});

// Adding the image to the container for preload

container.html('<img src="mygraphic.png" />');

Ответы [ 3 ]

5 голосов
/ 27 января 2012

Вам нужно сделать несколько вещей ...

  • Проверить свойство complete элемента img.
  • Присоединить событие load перед установкойsrc свойство.

Кроме того, я обнаружил, что создание нового Image и присвоение src - лучший способ определить, загружено изображение или нет.

4 голосов
/ 27 января 2012

Возможно, вы захотите переключить вызовы .html() и .onload().

Если изображение загружается из кэша, я предполагаю, что вызов .html() завершается до у сценария была возможность присоединить обработчик функции к событию onload изображения.Таким образом, эффективно обходя само событие загрузки (поскольку изображение уже загружено ).

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

Пока вы это делаете, вы можете захотеть сделать это способом jQuery, просто так вы присоединяете события более похоже на DOM2, чем на DOM0. 

var image = $('<img/>', { 
    src : 'http://mydomain.com/image.png'
}).load(function () {
    alert(this.width);
})
// maybe clear container before if you want
.appendTo(container);

Если мы собираемся установить src после onload, мы могли бы сделать это вместо этого: 

var image = $('<img/>')
    .load(function () {
        alert(this.width);
    })
    .attr('src','http://mydomain.com/image.png')
    .appendTo(container)
    ;

Надеюсь, это работает чисто.

1 голос
/ 27 января 2012

Этот ответ JavaScript: знать, когда изображение полностью загружено предлагает вам установить onload перед настройкой src

...