Question

我有一个页面，其中有一些弹出窗口显示页面上每个项目的详细信息。当用户单击按钮时，将显示弹出窗口（这是一个jQuery对话框）。对话框的html是从另一个页面/网址中提取的。我使用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);
);

Answer 2

如果您知道文件的路径，那么经典的预加载器脚本可能很有用：

var loadImages = (function() {
  var imageArray = [];

  // imagePaths is an array of image paths
  return function(imagePaths) {
    var i = imagePaths.length;
    var image;

    while (i--) {
      image = new Image();
      image.src = imagePaths[i];
      imageArray.push(image);
    }
  }
}());

每当您加载页面的新部分时，将数组中的图像路径传递给该函数。你可以每次都清理imageArray，一旦加载了图像，它们就不需要留在数组中，但是它们必须挂起足够长的时间来加载。

Answer 3

试

$(window).load(function() {
    // preloading code
    })

这将在您的页面（包括所有帧，图像等）加载后调用预加载。

请注意，这是jquery load event handler，而不是load function

使用jQuery .load（）预加载页面？

3 个答案: