Как браузер узнает, загружено ли изображение? - PullRequest
Новая
       35

Как браузер узнает, загружено ли изображение?

2 голосов
/ 27 сентября 2010

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

var imgs = $('#bgStage img.bg'),
           imgCnt = imgs.length,
           cnt = 0;

imgs.load(function () {
    cnt++;
    if (imgCnt === cnt) {
        homeSlider();
    }
}).each(function () {
    if (this.complete) {
        $(this).trigger('load');
    }
});

Это, похоже, не ждет, пока загрузится img.bgФункция homeSlider () вызывается и запускается, поскольку я все еще вижу изображение, которое все еще загружается.

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

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

Ответы [ 5 ]

0 голосов
/ 27 сентября 2010

Каждое изображение имеет полное свойство. К сожалению, не все браузеры поддерживают это. Они всегда сообщают об истине, даже если изображение не загружается вообще. IE понимает это правильно. ; -)

http://simon.html5.org/test/html/semantics/img/src/ (не мое)

0 голосов
/ 27 сентября 2010

Используйте что-то простое, например, так: 

var loaded =  false;
var len = $('#bgStage img.bg'), c = 0;
$('#bgStage img.bg').each(function(){

    $(this).attr('src',$(this).attr('src') + new Date()); //Remove caching.

    $(this).bind('onload',function(){

        //Other Stuff here!

        if(c == len)
        {
            HomeSlider();
        }
        c++; //Increment
    });
});

Скажите, как это происходит:)

0 голосов
/ 27 сентября 2010

Вот пример кода, который должен работать.Я сделал проект, который нуждался в этом, и я помню, что некоторые проблемы могут включать в себя:

  • Браузер кэширует изображение (я полагаю, IE), поэтому мне пришлось добавить? [Random] в конце
  • Может быть, вам нужно установить src javascriptly, чтобы ваше событие было подключено в нужное время

Пример кода: 

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){       
    $('#imageSample')
        .load(function(){
            alert($('#imageSample').width());
            alert($('#imageSample').height());
        })
       .attr('src', 'http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg?' + new Date());

});
</script>
<style type="text/css"></style>
</head>
<body>
    <img id="imageSample" src="" alt="" />
</body>
</html>
0 голосов
/ 27 сентября 2010

Изображения могут быть кэшированы, попробуйте это: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

0 голосов
/ 27 сентября 2010

Вы всегда можете проверить наличие $ ('img'). Length ();

...