2016-08-24 14 views
0

私は、彼らがHTMLに表示される前に、画像の実際のサイズを取得しようとしましたが、私はほとんどの場合、これを使用します:JavaScriptを完全に読み込む前に画像の幅と高さを取得するにはどうすればよいですか?

var imgae = new Image(); 
image.src = img.src; 
image.onload = function() { 
    // Do something with image.width and image.height 
    // and insert an <img> into <body> 
} 

しかし、それはダウンロードに数秒かかる場合がありますように、画像が大きすぎると、ユーザーは画像を見る前に完了するまで待つ必要があります。 Image.onloadが(イメージのメタデータがロードされた後に)トリガーされる前に情報を取得できる方法はありますか?ページの一部を表示することができますか?

+0

@AlexD setIntervalは私のために働きますが、ここでは奇妙に見えます。どうもありがとう。 –

+0

この質問はすでに回答済みです:http://stackoverflow.com/questions/6575159/get-image-dimensions-with-javascript-before-image-has-fully-loaded – Gajen

答えて

0

jQueryを使用していてイメージサイズを要求している場合は、ロードするまで待つ必要があります。そうしないとゼロになります。

function loadImages(imgsrc, callback) { 
    var image = new Image(); 
    image.onload = callback; 
    image.src = imgsrc; 
} 

してからあなたを:

$(document).ready(function() { 
    $("img").load(function() { 
     alert($(this).height()); 
     alert($(this).width()); 
    }); 
}); 

あなたが削除されたそのロード方法を覚えているjQueryの3.0を使用している場合は、 $('img').on('load', function() {})

+1

jQuery 3.0を使用している場合は、 'load 'メソッドが削除された場合は、' $( 'img')。on( 'load'、function(){}) 'を使用してください。 – ofca

0

あなたは、単に適切なコールバックを使ってあなたの機能を非同期に行うことができます使用しますこのように簡単にこの関数を呼び出すことができます

loadImages('you image src', function() { 
    // whatever code to be executed 
}); 

希望はあなたのために働く。

0
var _URL = window.URL || window.webkitURL; 
    function displayPreview(files) { 
    var file = files[0] 
    var img = new Image(); 
    var sizeKB = file.size/1024; 
    img.onload = function() { 
     $('#preview').append(img); 
     alert("Size: " + sizeKB + "KB\nWidth: " + img.width + "\nHeight: " + img.height); 
     } 
     img.src = _URL.createObjectURL(file); 
     } 
関連する問題