加载后显示 gif

Question

所以我的网站上有一个<img onload="resizeImage()" src="movie.gif">，我只想在它完全加载后显示它。 gif是通过php从我的sql数据库加载的，因此img src因页面而异。我也有调整大小以使图像全尺寸

<script type="text/javascript">

function resizeImage()
{
  var window_height = document.body.clientHeight
  var window_width  = document.body.clientWidth
  var image_width   = document.images[0].width
  var image_height  = document.images[0].height
  var height_ratio  = image_height / window_height
  var width_ratio   = image_width / window_width
  if (height_ratio > width_ratio)
  {
    document.images[0].style.width  = "auto"
    document.images[0].style.height = "100%"
  }
  else
  {
    document.images[0].style.width  = "100%"
    document.images[0].style.height = "auto"
  }
}
</script>

是否可以将 gif 放入 div 中并执行此操作

#div {
     display:none;
{

然后在加载图像后将 div 更改为此

#div {
     display:block;
{

Answer 1

你可以使用这个 HTML：

<img src="movie.gif" onload="displayImage(this)" style="display:none;">

使用这个javascript：

function displayImage(obj) {
    obj.style.display = "block";
}

在 HTML 中不使用事件处理程序的另一种方法是动态创建对象，并且仅在加载后将其插入页面，如下所示：

var img = new Image();
img.onload = function() {
    document.body.appendChild(this);
};
img.src = "movie.gif";

或者，您也可以动态创建它，立即将其插入 DOM，但仅在加载后才可见：

var img = new Image();
img.style.display = "none";
img.onload = function() {
    this.style.display = "block";
};
img.src = "movie.gif";
document.body.appendChild(img);

---

好的，既然您已经展示了您的实际代码和 HTML，下面是一个考虑了附加信息并使用您现有代码的答案：

让你的 HTML 变成这样：

<img onload="resizeImage(this)" src="movie.gif" style="display:none;">

将您的代码更改为：

<script type="text/javascript">

function resizeImage(obj)
{
  var window_height = document.body.clientHeight;
  var window_width  = document.body.clientWidth;
  var image_width   = obj.width;
  var image_height  = obj.height;
  var height_ratio  = image_height / window_height;
  var width_ratio   = image_width / window_width;
  if (height_ratio > width_ratio)
  {
    obj.style.width  = "auto";
    obj.style.height = "100%";
  }
  else
  {
    obj.style.width  = "100%";
    obj.style.height = "auto";
  }
  obj.style.display = "block";
}
</script>