我可以在后台默默加载javascript或图像文件吗?

Can I silently load javascript or image files in the background?

本文关键字：图像 文件 javascript 后台 默默 加载 我可以      更新时间：2023-09-26

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

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

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

在<>: 

<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中加载所有的资源，它们将在你的页面完全加载后加载。

这可以通过在CSS类中添加image path来实现。加载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张图片。只要确保在需要加载这些图像时调用此方法即可。

可以这样加载图片:

var img = new Image();
img.onload = function() {
     //image loaded
};
img.src = "image.png";

如果没有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"/>

在页面上创建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;
}
相关文章：