純粋なJavaScriptを使用した基本的な無限スクロール/レイジーローディングブログ記事

Question

私は軽量のソリューション（うまくいけば、jQueryはありませんが、私は提案があります）を探しています。クライアント側でそこにあるほとんどのソリューションは、サーバー側からデータをロードするか、ページネーションを処理するために、AJAXに対応しています。私は無限にスクロールしているクライアント側に完全にロードされた単一の長いページで動作するものを見つける必要があります。

ので、HTMLは次のようになります：

<div id="blog-post"> 
     <h2 class="post-title">Cupcake ipsum.</h2> 
     <img class="post-image" src="img/posts/cupcakeIpsum.jpg"> 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
     <hr> 
    </div> 

これと同一の抜粋は、基本的に何度も何度も同じように繰り返されます。私は基本的に最初に3つのブログ投稿を表示したいし、スクロールがビューポートの一番下に達すると、別の3つの投稿セットを公開したいと思います。

私は純粋なJavaScriptでこれをどのように達成できるかについてのアイデアはありますか？ （ES6も可能です。）

Answer 1

divにはattrを追加する必要があります。 visibleのように、divにIDを追加すると良いことではありません。あなたのスクリプトは失敗し、最初の項目のみで正常に動作します。idの代わりにclassを使用する必要があります。

window.onscroll = function(ev) { 
 
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) { 
 
     // you're at the bottom of the page 
 
     // console.log("Bottom of page"); 
 

 
     var posts = document.querySelectorAll('.blog-post:not(.visible)'); 
 
     
 
     for(i = 0; i < posts.length; i++){ 
 
     if(posts[i] != undefined && i < 3){ 
 
      posts[i].className += "visible";   
 
     } 
 
     } 
 
    } 
 
};

.blog-post{ 
 
    /*display:none;*/ 
 
    opacity:0; 
 
    transition: opacity 5s; 
 
} 
 

 
.visible{ 
 
    /*display:block !important;*/ 
 
    opacity:1; 
 
}

<div class="blog-post visible"> 
 
     <h2 class="post-title">Cupcake ipsum.</h2> 
 
     <img class="post-image" src="http://placehold.it/350x150"> 
 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
 
     <hr> 
 
</div> 
 
<div class="blog-post"> 
 
     <h2 class="post-title">Cupcake ipsum.</h2> 
 
     <img class="post-image" src="img/posts/cupcakeIpsum.jpg"> 
 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
 
     <hr> 
 
</div> 
 
<div class="blog-post"> 
 
     <h2 class="post-title">Cupcake ipsum.</h2> 
 
     <img class="post-image" src="img/posts/cupcakeIpsum.jpg"> 
 
     <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p> 
 
     <hr> 
 
</div>

テスト&から取られたスクロール方法：https://stackoverflow.com/a/31264162/2259466

注：私のコードで期待どおりに働いていない移行。 display noneも使用する必要がありますが、アニメーションを使用することはできません（実際には可能ですが、回避策が必要です）。または、jsでアニメーションを使用することもできます。

一般的に、コードはそのように見える必要があります。私はそれが完了していないことを知っているが、私はあなたにそれのアイデアを与えることを願っています