一次加载整个网站的所有图像和脚本？

Question

无论如何要加载所有图像和脚本，而不是从当前网页，而是在第一次加载时从整个网站加载，以便全部缓存。

我知道这可能不是最佳实践，但会派上用场。

Answer 1

前言

首先，这是一个坏主意。 它会使您的页面加载速度比需要的慢，从而将您的服务器资源和带宽浪费在您网站的访问者甚至可能不需要的内容上（即他们只加载该页面）。 不过，如果这真的是你想要的，让我们这样做：

脚本

我们可以使用 Javascript 动态加载脚本：

var scriptUrls = ["a.js","b.js","c.js"];
for (i=0;i<scriptUrls.length;i++) {
    var script = document.createElement("script");
    script.src = scriptUrls[i];
    document.head.appendChild(script);
}

在scriptUrls我们定义了从文件到要加载的脚本的路径；
然后我们遍历scriptUrls每个项目；
我们使用document.createElement("script")创建一个新的 DOM 元素 - 这会创建一个新的<script>元素 - 并将其分配为变量script的值；
我们将src (source) 属性设置为scriptUrls当前 URL 的scriptUrls ；
然后我们使用.appendChild方法将脚本元素添加到 HTML 文档 ( document.head ) 的<head>中。

这就是我们加载脚本所需的全部内容。

图片

可以使用 Javascript 以类似的方式加载图像，但有一些区别：

var imgs = [];
var imgUrls = ["a.png","b.jpg","c.gif"];
for (i=0;i<imgUrls.length;i++) {
    imgs.push(new Image());
    imgs[i].src = imgUrls[i]
}

imgs在空数组中，我们可以在它们加载时存储图像对象。 之后您仍然可以使用常规方法在页面上使用它们<img src="..."> ； 这只是让它们正确加载的临时方法；
imgUrls只是您要加载的所有图像的 URL 数组；
现在，我们遍历imgUrls ；
new Image()创建一个新的 Image 对象（ https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image ）。 我们将其添加到imgs数组imgs.push ；
现在，我们将图像的源src （ imgs[i].src设置为imgUrls数组（ imgUrls[i] ）中的当前项）。

这就是我们加载图像所需的全部内容。

笔记

您可以将其作为 head 部分的第一个脚本。 就像，将所有这些代码放在一个 JS 文件（即load.js ）中并包含它（ <script src="load.js"></script> ）。

Answer 2

是的，但它并不漂亮或高效。

您需要做的就是在您的第一页上包含每个脚本、链接、参考、图像、CSS 和诸如此类的东西。 例如：

<!DOCTYPE html>
<html>
<head>
  <script src="script_for_page_1" />
  <script src="script_for_page_2" />
  <script src="script_for_page_3" />
</head>
<body>
  <img src="image_from_page_one" style="opacity: 0" />
  <img src="image_from_page_one" style="opacity: 0" />
  <img src="image_from_page_one" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_three" style="opacity: 0" />
</body>
</html>

一次加载整个网站的所有图像和脚本？

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-02-11 06:14:52

前言

脚本

图片

笔记

解决方案2
0 2017-02-11 05:19:13

一次加载整个网站的所有图像和脚本？

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-02-11 06:14:52

前言

脚本

图片

笔记

解决方案2 0 2017-02-11 05:19:13

解决方案1
2 已采纳 2017-02-11 06:14:52

解决方案2
0 2017-02-11 05:19:13