1

だから私は<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;
{
4

1 に答える 1

2

次の HTML を使用できます。

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

このJavaScriptで：

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

HTML でイベント ハンドラーを使用せずにそれを行うもう 1 つの方法は、オブジェクトを動的に作成し、次のように読み込まれたときにのみページに挿入することです。

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

OK、実際のコードと 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>
于 2012-08-18T20:18:01.383 に答える