2

外部PHPと一緒に機能するjQueryコードがありますが、通常は2回目の更新後にのみ機能します。このコードは、リスト内の各画像のサイズを取得するように設計されており、各画像のスタイルを変更して、最も長い辺に応じて親に合わせます。このページを初めてロードしたとき、jQueryはすべての画像の高さと幅を判別できないようであるため、スタイル設定は無視されます。PHPから呼び出された画像が完全にロードされた後にjQueryが実行されるようにするための最良の方法は何ですか？

シナリオ： 外部PHPスクリプトを使用して画像のリストを呼び出すページがあります。PHPが実行されると、結果はID「txtHint」のdiv内にHTMLとしてエコーされます。

したがって、このPHP（関連性のために切り捨てられます）...

echo "<li><img src='images/".$rowcat['imageurl']. "'><div class='title'>" . $counter . ". " . $rowcat['name'] ."</div></li>";                       
    $counter++;

この"txtHint"divにエコーされます：

<div class="featured-scroller">
<ul>
    <div id="txtHint">
            <li><img src="images/012.jpg"><div class="title">1. Eyemouth Museum </div></li>
            <li><img src="images/014.jpg"><div class="title">2. Edinburgh Museum</div></li>
            // and so on...
    </div>
</ul>
</div>

ただし、結果が返されたら、各画像インスタンスのサイズを確認し、元のアスペクト比を維持しながら、幅と高さのどちらが長いかに従ってスタイルを設定する必要があります。

現在、私は次のjQueryを使用しています。

$("#txtHint img").each(function() {
    var imgHeight = $(this).height();
    var imgWidth = $(this).width();

    if(imgHeight > imgWidth)
        {
            $(this).css({'height':'100%', 'width':'auto'});
        }
    else
        {
            $(this).css({'height':'auto', 'width':'100%', 'position':'relative', 'top':'50%', 'margin-top': -imgHeight / 2 + 'px', 'display':'inline-block'});
        }
});

外部PHPスクリプトは、ページヘッド内のJavaScript内から呼び出されることに注意してください。それが違いを生むかどうかはわかりません。

現在のコードは機能しますが、初めてではありません。$（window）.loadなどを試し、PHPスクリプトを呼び出す前述のJavaScript内で呼び出しましたが、問題は解決しません。

実用的な例については、次のJSfiddleを参照してください。http： //jsfiddle.net/EMPqW/

4

5 に答える 5

2

あなたの質問は少し混乱しています。私が理解している限り、ここであなたが本当に求めているのは、画像が読み込まれて寸法が正確に計算されるようにする方法です。

PHP は常に JavaScript の前に解釈されるため、PHP コードは無関係です。サーバーは HTML を出力し、JS はそれを認識しますが、元の PHP は認識しません。これがサーバークライアントモデルの仕組みです。

画像を操作する前に画像が読み込まれていることを確認するには、オブジェクトのloadイベントを使用できます。window

$(window).load(function(){ //images were loaded });
于 2012-12-13T23:16:54.660 に答える
1

試しましたか

$(document).ready(function(){
//your code here
});
于 2012-12-13T23:13:47.900 に答える
0

ここで必要なloadイベントを使用する前に、最新バージョンのjqueryを実行していることを確認してください。以前のバージョンでは、さまざまなブラウザ間でうまく実装されていませんでした。

于 2012-12-13T23:46:51.190 に答える
0

load()通常、イメージが完全にロードされていることを確認する必要がある場合 (JavaScript でイメージ src をレンダリングするときに必要になることがよくありますが、あなたのケースでも必要に見えます)、処理する前にハンドラーをイメージに配置するのに役立つものがない場合は、次のとおりです。デモ：

$("#txtHint img").each(function() {
    $t = $(this);

    function image_process() {
        var imgHeight = $t.height();
        var imgWidth = $t.width();

        if (imgHeight > imgWidth) {
            $t.css({
                'height': '100%',
                'width': 'auto'
            });
        }
        else {
            $t.css({
                'height': 'auto',
                'width': '100%',
                'position': 'relative',
                'top': '50%',
                'margin-top': -imgHeight / 2 + 'px',
                'display': 'inline-block'
            });
        }
    }
    if (this.complete) {
        image_process()
    } else {
        $t.one('load',image_process);
    }
});​

http://jsfiddle.net/oceog/EMPqW/5/ただし、例では両方ともこのハンドラーを使用しません$(window).load()。$(document).ready()

于 2012-12-13T23:22:16.900 に答える
0

すべての画像が読み込まれたことを確認したい場合は、次の.load()イベントを使用できます。

$(window).load(function() {
    // document and images should have loaded by now.
});
于 2012-12-13T23:16:03.180 に答える