img.on（" load"）在加载img之后但在它的大小设置（IE）之前执行 [英] img.on("load") executes after the img is loaded but before it has its size set (IE)

问题描述

编辑：添加了jsfiddle

EDIT : Added jsfiddle

• （for） https://jsfiddle.net/x60bwgw7/4/

（每个） https://jsfiddle.net/v3y2v8cf/3/

在IE中打开，输出值30是错误的（IE占位符高度）

open in IE, output values of 30 are wrong (IE placeholder height)

我尝试返回DOM naturalHeight和clientHeight，虽然naturalHeight在IE中正常工作，但clientHeight（我需要的那个）却没有。

I tried to return DOM naturalHeight and clientHeight, and while naturalHeight works properly in IE, clientHeight (the one I need) does not.

这是一个明显的解决方法，但它有点糟糕 https://jsfiddle.net/0rhjt0wn/1/

Here's an obvious workaround, but it kinda sucks https://jsfiddle.net/0rhjt0wn/1/

似乎问题是IE在加载后呈现图像，而其他浏览器在时呈现 加载，但我只是在这里猜测。

Seems like the problem is that IE renders image after it is loaded, while other browsers render it while it is being loaded, but Im just guessing here.

我有一些图像，我是nt加载通过将他们的data-src属性值分配给他们的src属性并在它们之后垂直居中。

I've some images, that I want to load by assigning their "data-src" attribute value to theirs "src" attribute and vertically center them after.

除IE之外的所有浏览器都可以正常工作（从8到边缘测试）。

It works without a problem in all browsers except IE (tested from 8 to edge).

在IE中，一些图像中心没有问题，但有些图像不会因为 .on（加载）事件中的代码在加载图像之后（可能）在执行其大小设置之前执行。

In IE some images get centered without a problem, but some wont and it is because code in the .on("load") event gets executed (probably) after the image is loaded, but before it gets its size set.

是否有任何方法可以在图像完成后始终执行代码已加载并且其大小已设置（在IE中）？

for (i = 0; i < 100; i++)
{
    targetSrc = $divElement.eq(i).children(imgClass).attr(dataSrc) + "?v=" + datetime;  

    $divElement.eq(i).find(imgClass).attr("src", targetSrc).on("load", function()
    {
        $holder.append($(this).attr("src") + " || height = " + $(this).height() + "<br>");
    });
}

推荐答案

最初认为 requestAnimationFrame 并且超时回退可以很容易地解决这个问题，但事实证明它要复杂得多。显然，在onload之后呈现图像的确切帧在IE中是不可预测的。但我最终提出了这个解决方案，它检查当前高度的 naturalHeight ，以查看是否已渲染图像，当它不是时，循环到下一个显示帧案例：

Initially thought requestAnimationFrame and a timeout fallback could easily solve this but it turned out to be a lot more complicated. Apparently the exact frame at which an image is rendered after onload is not very predictable in IE. But I eventually came up with this solution that checks the naturalHeight against the current height to see if an image has been rendered, looping through to the next display frame when it is not the case yet :

https://jsfiddle.net/r8m81ajk/

$(function() {

    if (window.requestAnimationFrame) var modern = true;

    var element = $('.divElement'),
    reference = '.imgElement',
    holder = $('.holder'),
    datetime = Date.now(),
    path, image;

    for (var i = 0; i < 100; i++) {

    var target = element.eq(i).children(reference),
    path = target.data('src') + '?v=' + datetime;

    target.one('load', function() {

        image = this;

        if (modern) requestAnimationFrame(function() {
        nextFrame(image);
        });
        else setTimeout(renderImage, 50);

    }).attr('src', path);
    }

    function nextFrame(picture) {

        var dimension = $(picture).height();

        if (dimension == picture.naturalHeight) {
        holder.append('height = ' + dimension + '<br>');
        }
        else nextFrame(picture);
    }

    function renderImage() {

        holder.append('height = ' + $(image).height() + '<br>');
    }
});

后备将始终检查第三帧（当没有瓶颈时）。不介意我将代码调整到我惯常的约定，外部引用应该保持不变。

The fallback will always check on the third frame (when there's no bottleneck). Don't mind I adapted the code a bit to my usual conventions, the external references should have remained the same.

从问题我意识到循环可能甚至不是当图像加载足够时，需要并获得 naturalHeight 。有趣的练习可以在任何情况下检测渲染的确切点。

From the question I realise the loop might not even be needed and getting naturalHeight when the image loads would be enough. Interesting exercise to detect the exact point of rendering in any case.

这篇关于img.on（" load"）在加载img之后但在它的大小设置（IE）之前执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！