0

質問 1:リンクがクリックされたときに 3 つのことを行うためにコールバックを使用しています
。ロード時に問題が発生している可能性があります。ロード機能は終了しますが、コンテンツが数秒間表示されないのはなぜですか? load 関数は、読み込まれる画像のサイズを認識せず、html ページのサイズのみを計算するのでしょうか?

1) SlideUp 現在の div(container)
2) $iframe(div) 内に HTML コンテンツ(画像) をロード
3) SlideDown コンテンツを持つ $iframe div

問題は、オンライン環境で表示したときにアニメーションが表示されないことです。すべてが即座に行われる localhost でのみ機能します。

$(".container").slideUp(500, function(){
    $iframe.load($mylink, function(){
        $iframe.slideDown(500)}
)});

質問 2:
ボタンを使用して、html コンテンツをロードする div を閉じます。その場合、読み込まれた各コンテンツの高さがリセットされるように div を空にする必要がありますが、 .empty() はコンテンツを即座に非表示にします。最初にアニメーション化してからdivを空にしようとしましたが、空が単独で使用されている場合のようには機能しません:

$close.click(function(){ $iframe.slideUp(500, function(){$iframe.empty()}), $(".container").slideDown(500)});
4

1 に答える 1

1

理論的には、これは、ロードされたすべてのコンテンツがロードされた後にアニメーションを起動するために機能するはずです...

//This is ajax load()
$iframe.load($mylink, function(){ 
    //This is event handler load()
    $iframe.load(function(){
        $iframe.slideDown(500);
    });
});

問題は、ドキュメントに記載されている警告に基づいて、ロード イベント ハンドラーの有効性について確信が持てないことです。

アップデート

load イベントが div 内の新しい要素の読み込みを正しく処理せず、トリガーされないことが判明しました。最も賢明な解決策は<iframe>、新しい「src」が読み込まれるたびに load イベントをトリガーする actual を使用することだと思います。

$iframe.attr('src', $mylink).load(function () {
    //set the height of the iframe to fit it's content
    $iframe.height($iframe[0].contentWindow.document.body.scrollHeight);
    $iframe.slideDown(500);
});

更新 2

iframe ソリューションがクロスブラウザーではないことを確認すると、次のハックが機能する可能性があります。

$iframe.load($mylink, function (){
    var $imgs = $iframe.find('img'),
        count = 0;
    $imgs.load(function(){
        if (++count == $imgs.length){
            //all images have been loaded
            $iframe.slideDown();
        }
    });
});

div の使用に戻り、コンテンツが DOM に挿入された後、追加されたすべての画像に対して load イベント ハンドラーを追加し、すべてが読み込まれたときにアニメーションを実行します。

新しいデモはこちら

于 2013-09-08T07:46:27.980 に答える