画像をアップロードするための画像ロードプラグインのアドバイス

Question

画像を正しく読み込むために、Masonryのレイアウトを取得する際に問題が発生しました。私は合理的にjavascriptを新しくしています。私はimagesLoadedを試してみましたが、正しく動作させるために問題を抱えています。なぜなら、私は正しいjavascriptを適切な場所に置いていると確信していないからです。

は、ここで私はmasonry.jsとしてこれを保存し、HTMLの中にそれをロードしているサイトhttp://imagesloaded.desandro.com/

$('#container').imagesLoaded(function() { 
}); 

$('#container').imagesLoaded({ 

    }, 

function() { 
} 
); 

$('#container').imagesLoaded() 
    .always(function(instance) { 
    console.log('all images loaded'); 
    }) 
    .done(function(instance) { 
    console.log('all images successfully loaded'); 
    }) 
    .fail(function() { 
    console.log('all images loaded, at least one is broken'); 
    }) 
    .progress(function(instance, image) { 
    var result = image.isLoaded ? 'loaded' : 'broken'; 
    console.log('image is ' + result + ' for ' + image.img.src); 
    }); 

から取られたjavascriptの私のloadedImagesです。

masonry.pkgd.min.js以内に私は書かれている：石工工事

$('.grid').masonry({ 
    // set itemSelector so .grid-sizer is not used in layout 
    itemSelector: '.grid-item', 

    // use element for option 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 

}) 

を、私は、ページレイアウト区切りを更新すると。ブラウザを調整すると、それ自体が修正されます。何が起きているのかを示すウェブサイトは次のとおりです：http://www.elraymond.com/

また、この権利を置くための助言や指針は非常に高く評価されます。

石工がcallesを取得する前に私は思うのおかげ

Answer 1

が、問題は、ファイルをロードした画像で間違っ多分その何か...、イメージが完全にロードされていないこと、である...

少ない決して、私は、あなたがそれのためにこのライブラリを必要とする...次のコードを使用して新しいJSファイルを作成しようと思うと石工ファイルの後

$(window).on('load', function(){ 
    $('.grid').masonry({ 
     // set itemSelector so .grid-sizer is not used in layout 
     itemSelector: '.grid-item', 

     // use element for option 
     columnWidth: '.grid-sizer', 
     percentPosition: true, 

    }) 
}); 

それを含んでいないことが多い、これらのライブラリは本当に必要ありません。 ... jQueryの.on（ 'load'）関数は、これらの場合に適しています。同じことです...唯一の違いは、ページからのすべてのリソースが読み込まれるまで待機することです。イメージだけでなく、...