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>

加载后显示一个gif

1 个答案: