0

重複の可能性:
JavaScript プリロード画像

ページが読み込まれた後、JS を使用して img.hidden=false を設定しています。これにより、画像がダウンロードされ、img 要素のサイズが変更されます。これは避けたいと思います (インライン スタイル width:2em を使用して画像のサイズを変更しています)。2 番目に、img ソースを変更すると、2 番目のイメージがダウンロードされるときにわずかな遅延が発生します。

ページに表示する前に画像をダウンロードするにはどうすればよいですか?

4

2 に答える 2

2

最初にイメージをダウンロードしてから、jquery を使用して次のようにアクションをトリガーします。

  var i = document.createElement('img'); // or new Image()
  // may be you need to set the element id...
  i.id = 'your id';
  // here handle on load event
  $(i).load(function() {

       // finally the new image is loaded, you can trigger your action
       $('#container').append($(this));

  });
  // This is the last step, set the url and start the image download.
  i.src = 'http://www.hostname.com/yourimage.jpg';
于 2013-01-08T15:23:13.927 に答える
1

jQuery を使用しない場合 (必要な場合):

var imageNode = new Image(); // or document.createElement('img');

imageNode.onload = function(e) {
    // Code for appending to the DOM
    document.getElementById('container').appendChild(this);
};

imageNode.src = 'path/to/image.jpg';

次のように img タグが既に存在する場合:

<img id='myimg' alt=''>

JavaScript の使用:

var imageNode = document.getElementById('myimg');

それ以外の：

var imageNode = new Image();

コードは img タグの後、または DOM の準備ができた/ロードされたときに実行する必要があることに注意してください。それ以外の場合、コードの実行時に存在しません

于 2013-01-08T15:34:38.523 に答える