Question

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

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

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

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

Answer 1

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

Answer 2

图像具有complete属性，在加载时属实。

e.g。将测试是否所有内容都已加载：

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

图片一旦加载

就会引发load事件

Answer 3

为什么不为你的图像保留一个计数器，在每个图像加载时减1。检查它是否等于0然后调用另一个函数。通过这种方式，您可以在加载所有图像时执行您想要的操作

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

    });
});

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

Answer 4

阅读jQuery ready API文档here：

当JavaScript提供用于执行代码的load事件时页面呈现，此事件在所有资产之前都不会被触发如图像已被完全接收。

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

Answer 5

请参阅window.load事件：

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

我相信这正是你想要的。

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

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

如果您使用普通JS，window.load就是您想要的。
如果您使用的是jQuery，则需要$(document).load。

Answer 6

尝试jquery ready函数

（文档）$。就绪（函数（）{

巴（）; }）;

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

Answer 7

我在为Android应用开发网页视图时遇到同样的问题。 load 事件（包括窗口和图像元素）以及图像元素的完整状态过早发生。我的（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);
}

而不是窗口加载事件，图像的加载事件也应该起作用。但我发现等待所有东西更安全，因为其他元素可能会影响我的图像的绘制。

HTML / Javascript等待绘制图形

7 个答案: