Javascript / JQuery: Как обнаружить IMG полностью загружен или нет? - PullRequest
Новая
       4

Javascript / JQuery: Как обнаружить IMG полностью загружен или нет?

4 голосов
/ 23 декабря 2011

Все, что мне нужно сделать, это найти изображение в центре родительского элемента div.Сначала я попробовал это. 

$(document).ready(function() { 
    $('#image1').css({
    'top': 50%, 'left': 50%,
    'margin-top': (-$('#image1').height()/2) + 'px',
    'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
});

Не удалось, потому что $ ('# image1'). Height () и width () дают 0 до полной загрузки.Поэтому я старался проверять размер изображения до тех пор, пока оно не будет иметь определенной ширины и высоты.как, 

function inspectSize() { return ($('#image1').width() != 0); }
function setPosition() {
    if(!inspectSize()) {
        setTimeout(setPosition, 1000);
        return;
    }
    $('#image1').css({
        'top': 50%, 'left': 50%,
        'margin-top': (-$('#image1').height()/2) + 'px',
        'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
}
$(document).ready(setPosition);

Тем не менее это не работает.потому что $ ('# image'). width () возвращает 28px перед загрузкой в ​​IE8 (кстати, IE7 был в порядке)Итак, я наконец-то попробовал плагин waitForImages jQuery вот так, 

$(document).ready(function() {
    $('#image1').waitForImages(function() {
         setPosition(); // without inspectSize() 
    });
});

Он отлично работает с кэшированными изображениями, но не работает с некешированными изображениямиФункция вызывается до того, как Image1 имеет ширину и высоту.Что я должен делать?

Ответы [ 3 ]

6 голосов
/ 23 декабря 2011

Вы должны иметь возможность просто привязать свой обратный вызов для позиционирования к обработчику событий load.

Итак, в вашем последнем примере: 

$('#image1').load(function() {
     setPosition(); // without inspectSize() 
});

Где #image1 указывает на ваше изображениетег.В качестве альтернативы, как вы упомянули, #image1 может быть просто контейнером: - 

$('#image1 img').load(function() {
     setPosition();
});

Обновление jfriend00 делает хороший пример ниже, в этом 'load' будет срабатывать только тогда, когдаизображение добавляется в DOM, а не, если оно уже существует на странице во время запуска JavaScript.

Чтобы охватить оба сценария, вы можете сделать это: 

var img = $('#image1');

if (img.prop('complete')) {
     setPosition();
} else {
     img.load(function() { setPosition(); });
}

The prop('complete') check вернет true, если изображение уже существует, а если нет, мы привязываем обработчик события load.

1 голос
/ 23 декабря 2011

Попробуйте написать внутри тот же код. 

$('window').load(function() {
    // Your code here..
});
1 голос
/ 23 декабря 2011

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

<img data-src="image.jpg" />

, отмечая, что я еще не установил атрибут src 

$(function() {
    $("img").each(function() {
        $(this).load(function() {
            alert('ready to call $(this).width()');
        }).prop("src", $(this).prop("data-src"));
    });
});

набор .prop("src", $(this).prop("data-src")); - новый src после привязки события load

...