javascript - 使用 jQuery .load() 预加载页面？

Question

我有一个页面，其中有几个弹出窗口显示页面上每个项目的详细信息。当用户单击按钮时，将显示弹出窗口(这是一个 jQuery 对话框)。对话框的 html 是从另一个页面/url 中提取的。我使用 jQuery 的 .load() 方法。第一次将页面加载到我的对话框中时，浏览器需要几秒钟的时间，这是我老板不希望看到的。

我已尝试异步预加载这些页面，但无法正常工作。页面被阻塞，直到所有加载发生。我尝试了三种不同的方式:

//1
$('.transactions-preloader').each(
    function(index, Element){
    var id = Element.id.replace('details-dialog', '');
        $(this).load( "/" + id + "/1/" + period + ".html" );
    }
);

//2
$('.transactions-preloader').each(
    function(index, Element){
        var id = Element.id.replace('details-dialog', '');
        $.ajax({
              url: "/" + id + "/1/" + period + ".html",
              async: true,
              cache: false,
              success: function(html){
                  $("#"+Element.id).html(html);
              }
             });
    }
);

//3
$('.transactions-preloader').each(
    function(index, Element){
        var id = Element.id.replace('details-dialog', '');
        $.get( "/" + id + "/1/" + period + ".html", function(data) {
            $("#"+Element.id).html(data);
        });
    }
);

这三种方式都可以正常工作，除了它们都会在加载发生时阻塞页面。

关于如何进行异步预加载有什么想法吗？

Answer 1

试试这个它不会挂起浏览器。

$('.transactions-preloader').each(
    function(index, Element){
    setTimeout(function(){
      var id = Element.id.replace('details-dialog', '');
          $(this).load( "/" + id + "/1/" + period + ".html" );
      }
   }, 10);
);