2

我需要在页面上加载更大的图像后调用一个函数。我已经尝试了一些我在这里和网络上找到的各种解决方案，但没有一个适合或工作。这是我尝试过的最有意义的方法……这是使用 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 事件触发有任何见解，那就太好了！谢谢。

4

5 回答 5

0

每个图像都有一个完整的属性。不幸的是，并非所有浏览器都支持它。他们总是报告真实的，即使图像根本没有加载。IE 做对了。;-)

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

于 2010-09-27T18:52:06.810 回答
0

您可以随时检查 $('img').length();

于 2010-09-27T15:15:19.870 回答
0

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

于 2010-09-27T15:26:55.753 回答
0

使用像这样简单的东西：

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

告诉我进展如何:)

于 2010-09-27T15:27:30.173 回答
0

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

  • 浏览器缓存图像（我相信是 IE），所以我必须在末尾附加 ?[random]
  • 也许您必须以 javascript 方式设置 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>
于 2010-09-27T15:24:03.833 回答