Javascript / jQuery：如何检测img是否完全下载？ [英] Javascript/jQuery: How to detect img is fully downloaded or not?

问题描述

我需要做的就是将图像放在其父div的中心。

首先，我试过了。

All I need to do is locate image at the center of its parent div.
First, I tried this.

$(document).ready(function() { 
    $('#image1').css({
    'top': 50%, 'left': 50%,
    'margin-top': (-$('#image1').height()/2) + 'px',
    'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
});

失败导致$（'＃image1'）。height（）和width（）给出0之前它是完全下载的。

所以我试着继续检查图像的大小，直到它具有特定的宽度和高度。

like，

It failed cause $('#image1').height() and width() gives 0 before it is fully downloaded.
So I tried to keep inspecting size of the image until it has specific width and height.
like,

function inspectSize() { return ($('#image1').width() != 0); }
function setPosition() {
    if(!inspectSize()) {
        setTimeout(setPosition, 1000);
        return;
    }
    $('#image1').css({
        'top': 50%, 'left': 50%,
        'margin-top': (-$('#image1').height()/2) + 'px',
        'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
}
$(document).ready(setPosition);

仍然不起作用。

因为$（'＃image '）.width（）在IE8下载之前返回28px（顺便说一句，IE7很好）



所以我终于尝试了 waitForImages jQuery插件
喜欢这样，

Still it doesn't work.
because $('#image').width() returns 28px before it is downloaded in IE8 (by the way, IE7 was fine)

So I finally tried waitForImages jQuery plugin like this,

$(document).ready(function() {
    $('#image1').waitForImages(function() {
         setPosition(); // without inspectSize() 
    });
});

它适用于缓存图像，但不适用于非缓存图像。

在 Image1 具有宽度和高度之前调用该函数。



我该怎么办？

It works fine with cached images, but doesn't work with non-cached images.
The function is called before Image1 has width and height.

What should I do?

推荐答案

你应该能够将你的重新定位回调绑定到 load 事件处理程序。

You should be able to just bind your repositioning callback to the load event handler.

所以在你的上一个例子中：

So in your last example:

$('#image1').load(function() {
     setPosition(); // without inspectSize() 
});

其中＃image1 指向您的图片代码。或者，正如您所提到的那样＃image1 可能只是一个容器： -

Where #image1 points to your image tag. Alternatively, as you mention the #image1 might just be a container then:-

$('#image1 img').load(function() {
     setPosition();
});

更新 jfriend00在下方提出了一个很好的观点，因为加载将会只有在将图像添加到DOM时才会触发，而不是在JavaScript运行时页面上已存在该图像。

Update jfriend00 makes a good point below, in that 'load' will only fire when an image is added to the DOM, not if it already exists on the page at the time your JavaScript is run.

要涵盖这两种情况，您可以执行此操作这个：

To cover both scenarios, you can do this:

var img = $('#image1');

if (img.prop('complete')) {
     setPosition();
} else {
     img.load(function() { setPosition(); });
}

道具（'完整'）如果图像已经存在，check将返回true，如果不存在，我们将绑定'load'事件处理程序。

The prop('complete') check will return true if the image already exists, and if it doesn't we bind the 'load' event handler.

这篇关于Javascript / jQuery：如何检测img是否完全下载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！