从javascript加载图片

Question

在我的专辑幻灯片页面上,我有类似的代码

<span style="display:none;">
   <img id="id1" src="~$imageUrl`" onload="javascript:showImage();">
</span>

<span>
    // show loader.
</span>

在showImage(),我相信图像已加载,所以我显示图像并隐藏加载程序.

现在,当用户点击下一步时,我需要更改图像的src.现在我需要不知道如何在加载图像时设置src.

Answer 1

你可以添加另一个隐藏img元素并在onload事件中交换它们.

或使用单个图像元素并使用如下的JavaScript:

var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
    _img.src = this.src;
}
newImg.src = 'http://whatever';

此代码应预先加载图像并在图像准备好后显示

Answer 2

每次要加载图片时使用新的图像对象：

var image = new Image();
image.onload = function () {
    document.getElementById('id1').setAttribute('src', this.src);
};
image.src = 'http://path/to/image';

Answer 3

对不起大家.

您不能依赖图像加载事件来触发,但在某些情况下您可以依赖它并回退到允许的最大加载时间.在这种情况下,10秒.我写了这篇文章,当人们想要在表格帖子上链接图像时,它就存在于生产代码中.

function loadImg(options, callback) {
  var seconds = 0,
  maxSeconds = 10,
  complete = false,
  done = false;

  if (options.maxSeconds) {
    maxSeconds = options.maxSeconds;
  }

  function tryImage() {
    if (done) { return; }
    if (seconds >= maxSeconds) {
      callback({ err: 'timeout' });
      done = true;
      return;
    }
    if (complete && img.complete) {
      if (img.width && img.height) {
        callback({ img: img });
        done = true;
        return;
      }
      callback({ err: '404' });
      done = true;
      return;
    } else if (img.complete) {
      complete = true;
    }
    seconds++;
    callback.tryImage = setTimeout(tryImage, 1000);
  }
  var img = new Image();
  img.onload = tryImage();
  img.src = options.src;
  tryImage();
}

像这样使用:

loadImage({ src : 'http://somewebsite.com/image.png', maxSeconds : 10 }, function(status) {
  if(status.err) {
    // handle error
    return;
  }
  // you got the img within status.img
}); 

在JSFiddle.net上试试吧

http://jsfiddle.net/2Cgyg/6/