6

私はjqueryMasonryプラグインを使用しており、プラグインがトリガーされるまですべてのコンテンツを非表示にしようとしています。組積造は、デフォルトで、トリガーされる前にすべての画像をロードします。プラグインがトリガーされるまで「loading」divを表示したい。解像度が1024pxを超えていることを確認し、ページの読み込み時に「loading」divを表示するページを実装しましたが、現在、プラグインがトリガーされる前にページのコンテンツが表示されます。

<script>

$(document).ready(function() {
    $('#content').show();
    $('#loading').hide();
});

$(function(){

var $container = $('#container');
var width = $(window).width(); 
var height = $(window).height(); 

if ((width > 1024  )) {

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box',
    columnWidth: 120,
      });
    });

    }
    else {
    //load the css styles for screen res below 1024
    }

});

</script>

こちらの実例をご覧ください。

ご覧のとおり、コンテンツが表示されてからプラグインがトリガーされるまでに遅延があります。誰かがトリガー後にコンテンツ表示ユニットを遅らせるのを手伝ってくれることを願っていますか？

乾杯-ジェシー

4

3 に答える 3

5

.show()と.hide()呼び出しを内部$(document).ready()に配置するのではなく、内部に配置しimagesLoadedます。

$container.imagesLoaded( function(){
  $('#content').show();
  $('#loading').hide();
  /* other stuff... */
});

画像が読み込まれる前に準備ができている可能性があるため、document読み込みが不完全なページが表示されます。

于 2011-09-18T09:41:09.213 に答える
4

ものすごく単純 ：

ウィンドウオンロードを使用する

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

于 2011-09-18T09:38:54.630 に答える