jQuery惰性負載的動畫滾動

Question

我想使用Lazy load到我的網站，但有一個小問題：我用JS滾動內容（用X px動畫化內容），所以我不使用滾動條。可悲的是，在這種情況下，延遲加載不會觸發。有任何想法如何做到這一點？

我的網站橫向滾動，所有的內容div -s浮動靠近對方，並且只有當前一個是可見的，所有其他的都在display: none;

這裏是我的網站不那麼親PIC：我用黑色標記可見區域和紅色的移動部分。

my site in pic

Answer 1

好吧，幾個小時後，我決定使用JAIL。不是最好的解決方案，但比什麼都沒有，因爲我對AJAX很笨JAIL aka jQuery Asynchronous Image Loader

Answer 2

所有我能想到的是鉤到時內容的幻燈片，然後在添加圖像或如果那是你的目標的全部內容用AJAX。插件通常會關注大部分用例，因此懶惰加載可能不適合您。

Answer 3

我只想寫我自己的簡單的延遲加載腳本：

$(function(){ 
    $('img').each(function(){ 
    var $this = $(this) 
    $this.data('origImg',$this.attr('src')) 
    $this.removeAttr('src') // or set a placeholder img 
    }) 
    var $window = $(window), $container = $('#sliding_content') 
    window.lazyLoad = function() { 
    $container.find('img:not([src])').each(function(){ 
     var $this = $(this), left = $this.offset().left 
     if (!(left < 0) && !(left > $window.width())) 
     $this.attr('src',$this.data('origImg')) 
    }) 
    } 
}) 

，然後在div的是動畫，來電lazyLoad()。 讓我知道這是否適合你。 :)