diff --git a/share/all.css b/share/all.css
index fab7cd8..cc72132 100644
--- a/share/all.css
+++ b/share/all.css
@@ -11,9 +11,13 @@
   /* for Chrome & Safari */
   -webkit-text-stroke-width:0.13px; 
 }
+.pw {
+  border: 1px solid black;
+  margin: 13px auto;
+  overflow: hidden;
+}
 .p {
   position:relative;
-  margin:13px auto;
   background-color:white;
   overflow:hidden;
   display:block;
diff --git a/share/neck.html b/share/neck.html
index fadb9ea..fb82bfa 100644
--- a/share/neck.html
+++ b/share/neck.html
@@ -1,38 +1,7 @@
 <!-- neck.html by WangLu 2012.08.15 -->
-<title></title>
-<script type="text/javascript">
-/* show pages one by one asynchronously */
-function show_pages()
-{
- var pages = document.getElementById('pdf-main').childNodes;
- var idx = 0;
- var f = function(){
- if (idx < pages.length) {
-  try{
-   pages[idx].style.display='block';
-  }catch(e){}
-   ++idx;
-   setTimeout(f,100);
-  }
- };
- f();
-};
-</script>
+<title>pdf2htmlEX</title>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 </head>
-<body onload="show_pages();">
-<script type="text/javascript">
-/* hide all pages */
-(function(){
- var s = '.p{display:none;}';
- var n = document.createElement("style");
- n.type = "text/css";
- if (n.styleSheet) {
-  n.styleSheet.cssText = s;
- } else {
-  n.appendChild(document.createTextNode(s));
- }
- document.getElementsByTagName("head")[0].appendChild(n);
-})();
-</script>
+<body>
 <div id="pdf-main">
 <!-- neck.html END -->
diff --git a/share/tail.html b/share/tail.html
index 4624e30..5ef9d9c 100644
--- a/share/tail.html
+++ b/share/tail.html
@@ -1,5 +1,71 @@
-<!-- tail.html by WangLu 2012.08.15 -->
+<!-- tail.html by Hongliang 2012.09.11 -->
 </div>
+<script type="text/javascript">
+$(function() {
+  var $pages = $(".p"), 
+      $pageWrappers = $(".pw"),
+      $main  = $("#pdf-main"),
+      l = $pages.length;
+
+  $pages.hide();
+
+  function isPageVisible(i, H) {
+    var $pw = $($pageWrappers[i]),
+        t   = $pw.offset().top,
+        b   = t + $pw.height() ;
+    return ( ! ( b < 0 || t >= H ) );
+  }
+
+  function setVisibilities(from, to, visible) {
+    for(var i = from; i <= to; ++i) {
+      var $p = $($pages[i]);
+      if(visible) $p.show(); else $p.hide();
+    }
+  }
+
+  // Selectively rendering of pages that are visible or will be visible
+  function selectiveRender() {
+    console.debug('render'); 
+
+    var first = 0, last = l - 1,
+        H = $main.height();
+
+    // Find the first visible page
+    while(first < l && !isPageVisible(first, H))
+      first++; 
+    // Find the last visible page
+    while(last >= 0 && !isPageVisible(last, H))
+      last--;
+    console.debug('visible from='+first+", to="+last);
+    // Set invisible
+    setVisibilities(first > 0 ? first-1 : first, 
+                    last < l -1 ? last + 1 : last, true);
+    setVisibilities(0, first - 2, false);
+    setVisibilities(last + 2, l-1, false);
+  }
+
+  // Listen to scrolling events to render proper pages
+  var scrollTimer = null;
+  $("#pdf-main").scroll(function() {
+    // Now
+    lastScrollTime = Date.now();
+    // Make sure at most one timer runs
+    clearInterval(scrollTimer);
+    // Check when scrolling stops
+    scrollTimer = setInterval(function() {
+      // If scrolling pauses 300+ms
+      if (Date.now() - lastScrollTime > 300) {
+        clearInterval(scrollTimer);
+        // Only render pages that are or will be visible
+        selectiveRender();
+      }
+    }, 200);
+  });
+
+  // Trigger the event
+  $("#pdf-main").scroll();
+});
+</script>
 </body>
 </html>
 <!-- tail.html END -->
diff --git a/src/HTMLRenderer/general.cc b/src/HTMLRenderer/general.cc
index 5715876..3c9770b 100644
--- a/src/HTMLRenderer/general.cc
+++ b/src/HTMLRenderer/general.cc
@@ -174,6 +174,10 @@ void HTMLRenderer::startPage(int pageNum, GfxState *state)
 
     assert((!line_opened) && "Open line in startPage detected!");
 
+    // Add by Hongliang Tian
+    // wrapper for page
+    html_fout << "<div class=\"pw\" style=\"width:" << pageWidth << "px;height:" << pageHeight << "px;\">" << endl; 
+
     html_fout << "<div id=\"p" << pageNum << "\" class=\"p\" style=\"width:" << pageWidth << "px;height:" << pageHeight << "px;";
 
     html_fout << "background-image:url(";
@@ -221,7 +225,8 @@ void HTMLRenderer::startPage(int pageNum, GfxState *state)
 void HTMLRenderer::endPage() {
     close_line();
     // close page
-    html_fout << "</div>" << endl;
+    // Modified by Hongliang Tian
+    html_fout << "</div>" << endl << "</div>" << endl;
 }
 
 void HTMLRenderer::process_single_html()
