Question

我需要在页面上加载更大的图像后调用一个函数。我已经尝试了一些我在这里和网络上找到的各种解决方案，但没有一个适合或工作。这是我尝试过的似乎最有意义的......这是使用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中定义了图像的宽度和高度，以强制它成为一定的大小。

如果有人知道是什么让onload事件触发了图像，那就太好了！感谢。

Answer 1

您可以随时查看$（'img'）。length（）;

Answer 2

这是一个应该有效的示例代码。我做了一个需要这个的项目，我记得有些问题可能包括：

浏览器缓存图像（IE我相信）所以我不得不追加？[随机]在最后
也许你必须javascriptly设置src，以便在正确的时间挂钩你的事件

示例代码：

<!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>

Answer 3

图像可能会被缓存，请尝试：http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Answer 4

使用简单的东西：

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
    });
});

告诉我它是怎么回事:)）

Answer 5

每张图片都有完整的属性。不幸的是，并非所有浏它们总是报告为真，即使图像根本没有加载。 IE搞定了。 ; - ）

http://simon.html5.org/test/html/semantics/img/src/（不是我的）

浏览器如何知道图像是否已加载？

5 个答案: