Question

我想通过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同时执行所有进程，我将在加载图像之前获取元素的宽度。如何确保图像已加载到内容中;然后计算元素宽度？

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

Answer 1

您可以为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
}

Answer 2

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

这是不完美的，因为如果从浏览器的缓存中加载图像，onload / load事件可能根本不会发生（特别是在Chromium / Chrome中，我相信，尽管这是记忆中可能已经或可能没有修复的错误。

Answer 3

对于chrome bug，您可以使用以下命令： -

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
}

Answer 4

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);
}

Answer 5

您可以使用名为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时，我这样做了，这延迟了加载。

如何在JavaScript中完成另一个进程后执行一个进程

5 个答案: