javascript - 如何在屏幕外预加载ajax

Question

我正在尝试这样做。

我有一个带有 8 个图像的滑块，逐个传递。如果单击 Next 或 Prev 按钮，传递 8 个新图像。（所有这些图像都在我的 index.php 中声明）所以：

我需要在屏幕外（左侧 4 个和右侧 4 个）预加载 8 个图像（来自数据库），当我单击 Next 或 Prev 按钮时，会通过每个组。

我需要这样做以不加载所有图像（它将超过 200 个）。

我的代码是这样的：

<script type="text/javascript">
$(document).ready(function() {
   $("#foo1").carouFredSel({
       items    : 8,
       direction : "left",
       width : "100%",
       scroll : {
          items : 1,
          easing : "swing",
          duration : 300
       }                    
    }); 

    $("#foo1_next").click(function() {
        $("#foo1").trigger("next", 4);
    });

    $("#foo1_prev").click(function() {
        $("#foo1").trigger("prev", 4);
    });
});
</script>

太感谢了。

Answer 1

如果您想预加载图像而不显示它们，您可以随时执行

function preloadImage(url) {
  var image = new Image();
  image.src = url;
  return image;
}

然后在 DOM 中插入图像。