jQuery砌體預加載來自字符串的圖像

我正在使用砌體和一種不實際使用庫的無限滾動版本。初始圖像正確地進入佈局，但添加的圖像不會......它們只是連續添加。jQuery砌體預加載來自字符串的圖像

我相信這是因爲它們是從字符串加載的，它們沒有高/寬屬性來選擇位置。我認爲是因爲當我用預定尺寸的div包裝它們時，它們會正確進入佈局（但圖像將會是所有不同的高度）

我有一組頁面加載的圖像，佈局。

然後使用PHP調用SQL中，我收集圖像路徑，這是我變成JavaScript陣列的陣列：使用append

var images = [ 
<?php 
foreach ($images as $image) { 
echo "'/$image',\n"; 
} ?> 
]; 
$(images).each(function() { 
var image = $('<img />').attr('src', this); 
}); 
</script>

然後我在5加載它們在所述觸發事件的時間砌體：

$appendage += '<div class="box append"><img src="' + images[i] + '" /></div>'; 
count++; 
    } 

var $container = $('#result');  
$container.append($appendage).masonry('appended', $appendage);

我已經嘗試了各種方案的預加載圖像無濟於事..

$(images).each(function() { 
    (new Image).src = this; 
    });

任何人都可以提出一種方法，或許是一種更好的方法完全從圖像路徑的數據庫作爲起點加載到砌體作爲附加當您滾動到底部的圖像

謝謝！

來源

2012-11-16 MrBryan

你看過嗎？ http://masonry.desandro.com/demos/infinite-scroll.html

下面是相應的JavaScript：

$(function(){ 

    var $container = $('#container'); 

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

    $container.infinitescroll({ 
     navSelector : '#page-nav', // selector for the paged navigation 
     nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.box',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      img: 'http://i.imgur.com/6RMhx.gif' 
     } 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
     } 
    ); 

    });

來源

2012-12-29 05:42:26 shepardtone

jQuery砌體預加載來自字符串的圖像

回答

相關問題