0

我想通过 Javascript 添加图像，然后将 html 元素宽度计算为

window.onload=function(){
document.getElementById('x').addEventListener('click', function(e){
    var el = document.getElementById('xx');
    el.innerHTML = '<img src="img.jpg" />';
    var width = el.offsetWidth;
    .....
   }, false);
}

但由于JavaScript同时进行所有进程，我将在加载图像之前获取元素的宽度。如何确保图像已加载到内容中；然后计算元素宽度？

更新：感谢您的回答，但我认为存在误解。img src="img.jpg" />DOM 文档中不存在。稍后将由Javascript. 然后，当试图通过 捕获元素时Id，它可能不存在。

4

5 回答 5

2

您可以给 img 一个 ID 并执行以下操作：-

var heavyImage = document.getElementById("my-img");//assuming your img ID is my-img
heavyImage.onload = function(){
    //your code after image is fully loaded
}
于 2013-06-04T22:27:23.783 回答
1

这是未经测试的，但是如果您将图像添加到 DOM，设置onload/load事件处理程序，然后分配src图像的，事件处理应该触发（一旦加载）并允许您找到宽度。

但是，这是不完美的，因为如果图像是从浏览器的缓存中加载的，则onload/load事件可能根本不会触发（尤其是在 Chromium/Chrome 中，我相信，尽管这是来自可能存在或不存在的错误的记忆自从被修复）。

于 2013-06-04T22:26:58.860 回答
1

对于 chrome 错误，您可以使用以下内容：-

var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';//create a blank source

var tImg = document.getElementById("my-img");//get the image
var origSrc = tImg.src;//get the original src
tImg.src = BLANK;//change the img src to blank.
tImg.src = origSrc;//Change it back to original src. This will lead the chrome to load the image again.
tImg.onload= function(){
    //your code after the image load
}
于 2013-06-04T22:32:35.307 回答
1 
window.onload=function(){
     document.getElementById('x').addEventListener('click', function(e){
        var el = document.getElementById('xx');
        var img = new Image();//dynamically create image
        img.src = "img.jpg";//set the src
        img.alt = "alt";
        el.appendChild(img);//append the image to the el
        img.onload = function(){
           var width = el.offsetWidth;
        }
    }, false);
}
于 2013-06-04T23:05:57.860 回答
0

您可以使用一个名为PreloadJS的库，也可以尝试以下方法：

//Somewhere in your document loading:
loadImage(yourImage, callbackOnComplete);

function loadImage(image, callbackOnComplete){

   var self = this;
   if(!image.complete)
      window.content.setTimeout(
         function() { self.loadImage(image, callbackOnComplete)}
      ,1000);
   else callbackOnComplete();
}

我在处理加载延迟的图像 base64 时这样做了。

于 2013-06-04T23:12:21.190 回答