0

我听说过onload元素完全加载后调用的函数。对于图形或图像，这是否意味着它将等到图像显示在浏览器中？

<body onload="foo()">...
     <img onload="bar();"....

如果没有，有没有办法在绘制所有图形并在页面上显示图像时获取事件？

就我而言，它只有一张 1600*1200 的 jpeg 图像，我在上面画画。但是在我开始绘制之前必须显示图像，即使使用 onload 事件我也会在图像出现之前看到绘制的线条。

4

7 回答 7

2

Yesbody onload将等到所有图像（和其他内容）都加载/显示在浏览器中。将img onload等到该特定图像已加载/显示

于 2012-05-22T13:15:59.093 回答
1

图像具有complete加载时为真的属性。

例如将测试是否所有内容都已加载：

var allImagesLoaded = true;
$("IMG").each(function(){ allImagesLoaded &= $(this).attr("complete"); });
if(allImagesLoaded){ alert("Done!");}

load图像加载完成后引发事件

于 2012-05-22T13:20:07.893 回答
1

为什么不为您的图像保留一个计数器，该计数器将在每次图像加载时减一。检查它是否等于 0，然后调用另一个函数。通过这种方式，您可以在加载所有图像时做您想做的事情

$(function() {
    $('img').one('load',function() {
        // fire when image loads decrement the counter
        if counter ==0
        fireanotherfunction()

    });
});

通过上面的代码你可以达到你的目的

于 2012-05-22T13:20:16.207 回答
1

在此处阅读 jQuery 就绪 API 文档时：

虽然 JavaScript 提供了在页面呈现时执行代码的加载事件，但在完全接收到所有资产（例如图像）之前，不会触发此事件。

在所有onload内容都已加载（并显示）后启动。

于 2012-05-22T13:24:50.790 回答
1

查看window.load事件：

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在 DOM 中，所有图片和子帧都加载完毕。

这正是你想要的，我相信。

JQuery$(document).ready不是你想要的：

在代码依赖于加载的资源的情况下（例如，如果需要图像的尺寸），代码应该放在事件的处理程序中load[而不是ready事件]。

  • 如果您使用的是纯 JS，window.load那就是您想要的。
  • 如果你使用 jQuery，你会想要$(document).load.
于 2012-05-22T13:27:29.727 回答
0

尝试jquery准备功能

$(文档).ready(函数(){

酒吧（）; });

我不确定它是否有效，但这是一个尝试：D

于 2012-05-22T13:18:52.383 回答
0

我在为 Android 应用程序开发 Web 视图时遇到了同样的问题。加载事件（窗口和图像元素）以及图像元素的完整状态触发得太早。我的（svg）图像尚未完成绘制，因此尺寸计算出错。

我发现的唯一解决方法是一个非常短的计时器（1 毫秒或 10 毫秒）。这对我有用，因为我只有一个这样的图像要考虑。而且由于我在图像数据已经加载时启动了这个计时器，所以这个短暂的间隔应该足够长，让设备可以绘制图像。

window.addEventListener('load', function() {
    var img = document.getElementById('logo');

    window.setTimeout(function(){
        var imgRatio = img.naturalWidth / img.naturalHeight;
        var renderedWidth = parseInt(window.getComputedStyle(img).width.match(/(\d+)px/));
        console.log(renderedWidth, img.complete);
        if (renderedWidth < img.naturalWidth) {
            img.style.height = (renderedWidth / imgRatio) + 'px';
        }
    }, 1);
}

除了窗口加载事件，图像的加载事件也应该起作用。但我发现等待一切更安全，因为其他元素可能会影响我的图像绘制。

于 2015-06-08T12:32:57.343 回答