Question

我使用new Image()来预加载图像：

function preload() {
  var imgs = [];
  for (i = 0; i < arguments.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = arguments[i];
  }
return imgs;
}

//function being called like so
var paths = ["../images/image01.jpg","../images/image02.jpg", ...];
var images = preload.apply(null, paths);

这将返回一个img objects ...数组，当console.log()

显示时，所有属性都被清空

我的问题是 - 如何获得每个预装图像的宽度和高度？

甚至更多 - 是否有可能以某种神秘的方式更早地获得这些尺寸（某种预读 - 预加载的预图像），所以我可以创建特定尺寸的预加载图像？

我很抱歉，如果我不明白这些事情是如何发生的，那么这种情况很常见。

只是为了澄清

正如@Waterscroll所指出的，加载图像需要时间，因此在.onload事件发生时必须完成图像属性。稍后，某些callback function可以处理图像。

随意查看其他答案，因为它们显示了更实用的方法。

如果我可以添加某些内容 - 在某些情况下，存储图像尺寸（即在数据库中）可能是有益的。在这个特定的脚本中，我从数据库中获取文件路径，所以我也可以用图像的大小来做。

Answer 1

After you set the src property it takes a while for the image to load. In some browsers, you can use the load event to know when the image has been loaded, in browsers that don't support that event you can use the complete property to check if the image has been loaded. Once the image has been loaded you should be able to get the height and width of the image via the naturalHeight and naturalWidth properties.

The only way to get the height and width of the images without loading them is by saving that information in a place that you can reach with your script or inside your script.

Answer 2

这可能会帮到你。如果您没有等到它加载，宽度或高度将无法使用。

＆＃13;

var url = 'http://placehold.it/';
var paths = ["400x40","500x50","600x60","700x70","800x80"];
var images = preload.apply(null,paths); //preload images

//listen for onload on each element, and print w/h when ready
images.forEach(function(entry) {
    entry.onload=function(){
      document.getElementById('output').innerHTML += this.width+'x'+this.height+'<br />';
    };
});

//preload function
function preload() {
  var imgs = [];
  for (i = 0; i < arguments.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = url+arguments[i];
  }
  return imgs;
}

＆＃13;

<div id="output"></div>

＆＃13;

Answer 3

To answer your question How can I make sure all of them are loaded?, you will need to track the loading of all images in the array. Make sure you set the onload event before the src property like I did. I passed the collection to the AllImagesLoadedCallback() function only for testing so I can print out the dimensions, but you don't need to pass anything or pass whtever parameters and do whatever you like inside this function.

<div id="test"></div>
<script>
  function preload() {
    var imgs = [];
    var count = arguments.length;
    var loaded = 0;
    for (i = 0; i < arguments.length; i++) {
      imgs[i] = new Image();
      //Make sure you set "onload" before "src".
      imgs[i].onload = function() {
        loaded++;
        if(loaded == count)
          AllImagesLoadedCallback(imgs);
      }
      imgs[i].src = arguments[i];
    }
  return imgs;
  }

  //This function is called when all images have been laoded. 
  function AllImagesLoadedCallback(images){
    document.getElementById("test").innerHTML = "All images have been loaded. The dimensions are:<br/>";
    
    for(var i = 0; i < images.length; i++){
        document.getElementById("test").innerHTML += "Image: " + i + ": " + images[i].width + "x" + images[i].height + "<br/>";
    }
  }

  //This is just a test to call preload().
  var m = preload("http://placehold.it/400x40","http://placehold.it/500x50","http://placehold.it/200x20");
  //alert(m.length);
</script>

从Javascript Image（）获取图像属性元素构造函数

3 个答案: