2012-01-15 7 views
2

をロードするまで画像を表示しない:$content.html(contentHtml).ajaxify();:コンテンツは(ラインの周りに145にロードされたときにスクリプトがことを除いて、偉大な働いているhttps://github.com/browserstate/ajaxifyajaxが完了した後のjQuery .load()関数。 100%は、私がここで見つけるajaxify-html5.jsスクリプトを使用してい

)あなたはまだ画像の読み込みを見ることができます。私は "ロード"クラス(CSSの遷移でコンテンツをフェードインまたはフェードアウトする)を削除する機能を作成したいが、部分的に読み込まれた画像の表示を避けるために、ajaxコンテンツはフェッチされずに完全にロードされる。

次の行を146行目に挿入しようとしましたが、実行されません。

$content.load(function(){ 
    alert('asds'); 
    $body.removeClass('loading'); 
}); 

ありがとうございます!


UPDATE:カリムの回答に基づいて最終的な作業コード:

$content.html(contentHtml).ajaxify(); /* you could fade in here if you'd like */ 

var $imgs = $content.find("img"); 
var loadCounter = 0; 
var nImages = $imgs.length; 
$imgs.load(function() { 
    loadCounter++; 
    if(nImages === loadCounter) { 
     $body.removeClass("loading"); 
    } 

// trigger load event if images have 
// been cached by the browser 
}).each(function() { 
    if(this.complete) { 
     $(this).trigger("load"); 
    } 
}); 

答えて

3

私はこれがそのプラグインに収まるだろうか定かではないが、私はそのような状況で使用する一般的な解決策(私が持っていますあなたの状況を自分の能力に合ったものにするために適応させました)は次のようになります:

関連する問題