재우니의 블로그

이태원 참사에 대한 깊은 애도를 표합니다. 티스토리측에서도 공지했듯 이태원 참사 관련으로 콘텐츠를 생산하는분이 없기를 바랍니다.

반응형




이번 내용은 먼저 트위글 15개 리스트를 보여주고, 제일 하단의 글을 보고 스크롤을 선택하면, 16-30 개 사이의 리스트를

보여주는 기술이다.




  // Set the size for each page to load var pageSize = 15; // Username to load the timeline from var username = 'marcofolio';   // Variable for the current page var currentPage = 1;

Now, we need to call a function that'll load the first page.

 
// First time, directly load the tweets
loadTweets();

The loadTweets() code is wrapped inside a function, since we'll need to call it over and over to load more tweets. This is how it looks like:

 
// Loads the next tweets
var loadTweets = function() {
   var url = "http://twitter.com/status/user_timeline/"
         + username + ".json?count="+pageSize+"&page="+currentPage+"&callback=?";
         
   $.getJSON(url,function(data) {
      $.each(data, function(i, post) {
         appendTweet(post.text, post.id);
      });
      
      // We're done loading the tweets, so hide the overlay
      $("#overlay").fadeOut();
   });
};



  // Appends the new tweet to the UI var appendTweet = function(tweet, id) { $("<p />") .html(tweet) .append($("<a />") .attr("href", "http://twitter.com/" + username + "/status/" + id) .attr("title", "Go to Twitter status") .append($("<img />") .attr("src", "images/link.png") ) ) .appendTo($("#tweets")); };

We're using the jQuery function to dynamically the tweet paragraphs. We also add the link to the tweet by showing an image. We append the new element to the #tweets container and we're done!

But now, we have the initial fill (the first page). We now need to detect that the user is scrolling the #tweets container and find out if he is at the bottom to load the next page. Here's how this can be achieved:

 
// Append a scroll event handler to the container
$("#tweets").scroll(function() {
   // We check if we're at the bottom of the scrollcontainer
   if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
 
      // If we're at the bottom, show the overlay and retrieve the next page
      currentPage++;
      $("#overlay").fadeIn();
      loadTweets();
   }
});








반응형

댓글

비밀글모드