內容延遲加載

Question

這個想法是在接近可見顯示區域時加載ex： <div>內容。

例如，我可以使用圖像執行此操作：

 $(function() { $("img.lazy").lazyload({ effect: "fadeIn", threshold : 200 }); }); 

 <script src="https://code.jquery.com/jquery-1.11.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> <img class="lazy" data-original="http://www.aripaev.ee/storyimage/EA/20150529/NEWS/150529839/AR/0/Ainar-Sulumets.jpg&ExactW=640&ExactH=420&Q=95" width="450" height="280" /> <img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/pictures-1106-700x280.jpg" width="450" height="280" /> <img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/thumb37-700x280.jpg" width="450" height="280" /> <img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/160-700x280.jpg" width="450" height="280" /> <img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/fun-facts-1-700x280.jpg" width="450" height="280" /> <img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/pictures-1105-700x280.jpg" width="450" height="280" /> 

我的問題是，對於<div>及其內容，最干凈的方法是什么？

---

編輯：

我可以自己編寫臨時解決方案，那可以用，但是我希望現有的lib。

        var $myElt = $('#item');
        var $window = $(window);
        var myTop = $myElt.offset().top;
        var myBot = myTop + myElt.height();
        var windowTop = $window.scrollTop();
        var windowBottom = windowTop + $window.height();

        if ((myTop > windowTop && myTop < windowBottom) 
        || (myBot > windowTop && myBot < windowBottom)) {
           //load item

Answer 1

假設您使用的是jQuery lazyload插件，該插件中提供了一個選項，我們可以在其中創建一個錨元素，該元素的類等於其href等於將加載下一個內容的URL。 該錨點元素將位於容器的末尾，當錨點進入視口時，將觸發用於加載下一個內容的ajax調用。

我過去使用過它，但是我不記得確切的語法。

Answer 2

我認為，為了獲得更好的性能，如果沒有第三方庫就實現它更好。 例如，如果您將“ this.images_queue”作為圖像對象數組，則可能的解決方案是：

• 綁定滾動到窗口

• 您選擇滾動百分比以在超出滾動百分比時加載內容。 （百分比看起來是靜態的，但是在懶惰滾動時滾動條的長度會增加，因此它會平滑地動態變化）

• 如果最初渲染圖像，則選擇一個數字（在這里我選擇了12個）

• 選擇滾動時要添加的圖像數量（在這里我選擇了4個）

• “偏移”在開始時將為0，之后將在每次加載時更新，“結束”也將被計算，這兩個參數將確定要切片的數組部分，該部分將附加到模板中在每個負載上。

• 對於初始加載，您可以在頁面初始化時調用函數“ loadMore”：

這是一個可能的示例（使用BackboneJS），但通常它是合適的：

var self = this;
this.offset = 0;
$(window).bind('scroll', function(ev) {
self.loadMore(ev);
});
loadMore: function() {
    var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
    var scrollPercent = (s / (d - c)) * 100; // The percent of the scroll
        if (this.offset < this.images_queue.length && (this.offset == 0 || scrollPercent >= 70)) { // For firefox you can find the scroll bar scrolled on reload while offset=0
        var end = 0;
        if (this.offset == 0) {
            end = Math.min(12, this.images_queue.length);
        } //the min is used in case (12) exceeds the images_queue boundary
            else {
            end = Math.min(this.offset + 4, this.images_queue.length);
        } //the min is used in case (offset + 4) exceeds the images_queue boundary
            data = this.images_queue.slice(this.offset, end)
        var some_images = "";
        for (i = 0; i < data.length; i++) {
            var x = '<img class="lazy" data-original="' + data[i].image_url + '" width="450" height="280" />'
            some_images = some_images + x + '\n'; //normally works '\n'
        }
$(".divContainingImages").append(some_images); //Append the images from the sliced array
        this.offset = end;
    } //end if
} //end loadmore fun

• 注意：您必須從窗口$(window).unbind('scroll'); 在所有其他頁面上（在初始化每個頁面或在基礎頁面上）。