Javascriptスクロールユーザーがボトムに達したときに動的コンテンツをページにスクロール

これを解決するために何度も繰り返してきましたが、何か不足しているような気がします。Javascriptスクロールユーザーがボトムに達したときに動的コンテンツをページにスクロール

基本的には、ユーザーがページの下部に到達したときに私のウェブサイトが追加のコンテンツを読み込むようにしています。

私は私がやろうとしている何のためのテンプレートとしてこれを使用しているが、私はそれのいずれかが何を意味するのか見当がつかない。

<!DOCTYPE html> 
<html> 
    <head> 
    <script> 
     function yHandler(){ 
     // Watch video for line by line explanation of the code 
     // http://www.youtube.com/watch?v=eziREnZPml4 
     var wrap = document.getElementById('wrap'); 
     var contentHeight = wrap.offsetHeight; 
     var yOffset = window.pageYOffset; 
     var y = yOffset + window.innerHeight; 
     if(y >= contentHeight){ 
      // Ajax call to get more dynamic data goes here 
      wrap.innerHTML += '<div class="newData"></div>'; 
     } 
     } 
     window.onscroll = yHandler; 
    </script> 
    <style> 
     div#wrap{ 
     width:1000px; 
     margin:0px auto; 
     } 

div.newData{height:1000px; background:#09F; margin:10px 0px;} 

    </style> 
    </head> 
    <body> 
    <div id="status">0 | 0</div> 
    <div id="wrap"> 

    // what goes here?? htmL? 

    </div> 
    </body> 
</html>

JavaScript/Ajax/Jqueryを使用したことはありませんが、私が理解できるのはhtmlとcssです。だから誰かが私にこの仕事をさせるためにやるべきことを非常にはっきりと説明してもらえれば、本当にそれを愛するだろう。

たとえば、「ラップ」divの目的がわかりません。私はまた、「Ajaxコールがより動的なデータを得るために呼び出す」ことを理解していません。

私のウェブサイトでもわかるように、物語は順番にリストされています。約5階建て後には、ユーザーが一番下に達すると、さらに5つの物語が読み込まれます。それ以上の物語がなくなるまで、それを継続してください。私にとっては非常に複雑なものだと思われる、とても単純なことです。

ありがとうございます。

出典

2016-12-07 Enteva

あなたは次の5つの項目について、あなたにHTMLを返すサーバーアクションのどこかが必要になります。そのURLへのあなたのAjax呼び出しはその情報を取得し、それがあなたにElementに追加されます。

$.ajax({ 
    url : 'url', 
    type : 'GET', 
    data : { 
    'parameter' : 10 
    }, 
    dataType:'json', 
    success : function(data) {    
     alert('Data: '+data); 
    } 
});

出典

2016-12-07 18:38:07

だから私は「Ajaxコールがよりダイナミックなデータを得るためにここに行く」と言います。また、どのようにhtmlを取得するのかを指定する方法と、前のhetchを取得した後に新しいhtmlを取得する方法を教えてください。それで、それ以上の追加コンテンツがなくなるまで何度も何度もプロセスを繰り返します。ご協力いただきありがとうございます。 – Enteva

ページ上のコンテンツの読み込み方法どのように最初の5つのアイテムをロードするつもりですか？ –

Javascriptスクロールユーザーがボトムに達したときに動的コンテンツをページにスクロール

答えて

関連する問題