javascript - 加载大 HTML

Question

我有一个非常大的 html 文件，dom 元素的大小超过 1500。基本上有很多 div 元素，我们加载所有这些 div。但是，我们不会在开始时显示所有这些 div。有没有办法可以按需加载这些 div？

Answer 1

我假设您的意思是 1500 个元素。

研究 AJAX 和延迟加载，因此当用户接近它或它可见时加载内容。

http://www.thewebsqueeze.com/web-design-tutorials/introduction-to-ajax-with-jquery.html

http://www.lunatech-research.com/archives/2011/08/10/lazy-loading-jquery-ui-ajax-play

http://cflove.org/2010/09/how-to-build-a-lazyload-ondemand-load-with-jquery.cfm

http://www.infinite-scroll.com/

http://api.jquery.com/jQuery.ajax/

一个更重要的问题，你真的需要 1500 个元素吗，看起来很多。有没有办法可以减少元素的数量、使用分页或单独的页面？

例子

function loadHeads() {
  $.ajax({
    url: "/mycontent.html",
    context: document.body
  }).done(function(data) { 
    $("#container").html(data);
  });
}

$("#container").bind("mouseleave", function() {
   $(this).empty();
});

<div id="head" onclick="loadHeads()"></div>
<div id="container"></div>