预加载图像/文本，这样当.load被触发时，没有延迟

Question

我使用jquery .load将一些内容和图像加载到幻灯片div中，但是加载图像时似乎有延迟，所以当面板滑出时，我最终得到了图像的占位符框。有没有办法可以延迟.load函数，直到内容准备好或预加载图像，这样第一个地方就不会有延迟？

这是我用来加载图片/激活幻灯片

google.setOnLoadCallback(function () {
$("#show-services").click(function (e) {
    e.preventDefault;
    $(".content").load("index.html .get", function () {
        $('.hide-content').click(function () {
            $(".content").hide("slide", {
                direction: "right"
            }, 1000);
        });
    });
    return false;
  });
});

Answer 1

您可以隐藏容器，然后加载图像并等待它们被加载（使用一个Image对象数组，其src取自您的内容以及onload回调和计数器）。

Answer 2

您可以使用以下方法。

$('#content').load("index.html", function(){
   setTimeout(function(){alert("loaded")}, 3000);
});

成功加载页面后设置超时。