2

CSS 背景画像の幅と高さを取得し、それを document.ready javascript に挿入する必要があります。何かのようなもの：

$(document).ready(function(){
  img = new Image();
  img.src = "images/tester.jpg";


  $('body').css('background', 'url(' + img.src + ')');
  $('body').css('background-size', img.width + 'px' + img.height + 'px');
});

問題は、document.ready の時点で画像の幅と高さが読み込まれないため、値が空白になることです。(コンソールからアクセスできますが、以前はアクセスできません)。

img.onload = function() { ... }幅と高さを取得しますが、$(element)img.onload 内から DOM 呼び出しにアクセスすることはできません。

要するに、私は JavaScript に少し慣れていないので、画像パラメーターを DOM に同期する方法がわかりません。どんな助けでも大歓迎

編集: jQuery のバージョンは 1.4.4 で、更新できません。

4

1 に答える 1

2

すべての画像が読み込まれるまで、$.holdReady()jQuery のメソッドが起動しないようにするために使用できます。readyその時点で、それらの幅と高さはすぐに利用可能になります。

に電話してスターを付け$.holdReady(true)ます。各画像のメソッド内で、onloadまとめて読み込まれた画像の数を確認し、それが予想される画像の数と一致する場合は$.holdReady(false)、ready イベントを発生させることができます。

にアクセスできない場合は$.holdReady()、関数を呼び出して、すべての画像が読み込まれるまで、HTML を吐き出すのを待つことができます。

var images = { 'loaded': 0,
               'images': [
                 "http://placekitten.com/500/500", 
                 "http://placekitten.com/450/450", 
                 "http://placekitten.com/400/400",
                 "http://placekitten.com/350/340", 
                 "http://placekitten.com/300/300", 
                 "http://placekitten.com/250/250",
                 "http://placekitten.com/200/200", 
                 "http://placekitten.com/150/150", 
                 "http://placekitten.com/100/100"
               ]};

function outputMarkup() {
  if ( ++images.loaded === images.images.length ) {
    /* Draw HTML with Image Widths */ 
  }
}

for ( var i = 0; i < images.images.length; i++ ) {
  var img = new Image();
  img.onload = function(){
    outputMarkup();
  };
  img.src = images.images[i];
}
于 2012-05-13T06:24:05.870 に答える