2

我的应用程序有一个非常简单的主页，用作登录网关。用户必须先到这个页面。该页面没有 jQuery，一个非常小的 javascript 文件和一个小的 CSS 文件。它加载很快。

当用户专注于屏幕并开始输入登录详细信息或阅读标题和其他信息时，我想通过预加载一些图像、CSS 或 javascript 来充分利用这段时间，以便在用户登录时做好准备进入下一个屏幕。

有没有一种方法可以让我默默地做到这一点（希望用户在加载资源时不会在屏幕底部看到）。我只想加载几个文件，以尽量减少打开下一个屏幕所需的时间。

4

5 回答 5

1

这可以通过将图像路径放在您的 CSS 类中来完成。所以加载 CSS 类也会加载图片。同样，您也可以使用 javascript 预加载图像。

以下是我项目的示例片段；这里的图像正在使用 jquery 加载。你也可以在纯 javascript 中做同样的事情。

  loadImages : function(){
    this.picBaseUrl = BASE_URL + this.id + '/';  //base path for all images
    $('#p1').attr('src', this.picBaseUrl + '1.jpg');
    $('#p2').attr('src', this.picBaseUrl + '2.jpg');
    $('#p3').attr('src', this.picBaseUrl + '3.jpg');
    $('#p4').attr('src', this.picBaseUrl + '4.jpg');
    $('#p5').attr('src', this.picBaseUrl + '5.jpg');
}

所以在这里我已经加载了 5 张图片。只要确保在要加载这些图像时调用此方法即可。

于 2013-01-09T16:49:39.297 回答
1

在<头>中：

<script src='' id="s1" type="text/javascript"></script>

在页面末尾：

<script type="text/javascript">
var s1 = document.getElementById("s1");
s1.src= "myJavaScript.js";
</script>
</body>

您可以在 myJavaScript.js 中加载所有资源，它们将在您的页面完全加载后加载。

于 2013-01-09T16:53:32.110 回答
1

可以通过以下方式加载图像：

var img = new Image();
img.onload = function() {
     //image loaded
};
img.src = "image.png";
于 2013-01-09T17:05:06.650 回答
0

如果没有 JQuery，我认为将 onload 事件用于 body 标记。所以像（未经测试）：

<script>
function preLoad() {

document.getElementById("img1").src = "/images/image1toPreload.png";
document.getElementById("img2").src = "/images/image2toPreload.png";
document.getElementById("img3").src = "/images/image3toPreload.png";
}
</script>

...

<body onload="preLoad()">

your content here
...

<img style="display:none" id="img1"/>
<img style="display:none" id="img2"/>
<img style="display:none" id="img3"/>

于 2013-01-09T16:56:27.477 回答
0

在您的页面上创建 n 个 div，每个缓存图像 1 个，然后为它们定义 css。

#Div1 {
background: url(path/cachedImage1.png) no-repeat;
display: none;
}
#Div2 {
background: url(path/cachedImage2.png) no-repeat;
display: none;
}
#Div3 {
background: url(path/cachedImage3.png) no-repeat;
display: none;
}
于 2013-01-09T17:09:11.683 回答