Question

我试图找出一种方法将一些JSON数据从我的服务器传输到客户端，然后使用javascript评估客户端。

现在我通过一个重试JSON字符串的简单XHR调用来完成此操作。这很好，但问题是它的阻塞。

我想要做的是开始使用按需javascript加载下载我的.js文件，如：

  var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'myScript';
   script.type = 'text/javascript';
   script.src = "myScript.js";
   head.appendChild(script);

这样可以正常工作，并且不会阻止页面的其余部分加载。

然后在“myScript.js”中我有一个onload函数，当页面加载完成后会触发。在此函数中，调用服务器来检索JSON字符串。

问题是因为它是一个onload函数，所以在页面加载完成之前它不会开始检索这个JSON。

所以我正在寻找一种方法来在触发onload事件之前开始下载JSON字符串，但是没有阻止页面加载。

我的想法是我想将数据保存到gif服务器端，并开始下载这个页面的一部分，然后在onLoad上我将触发我的功能并使用javascript将gif转换为JSON。

希望它有意义！

Answer 1

您可以加载PNG文件并通过javascript和HTML5画布对象阅读。要点是将图像绘制到画布元素上;然后在绘制之后通过Javascript读取它。这是我研究的代码（https://github.com/ijoey/datainimage），它将JSON对象序列化为字符串，将数据存储到数组中并将其绘制到canvas元素上。然后，它读回来。

以下是我在Github上的代码的链接：https://github.com/ijoey/datainimage/

我从以下有关如何操作的文章开始： http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html

Answer 2

不，这没有意义。你的想法，就是这样。

您想将数据保存为gif。好吧，我想通过服务器脚本可以做到这一点。
您想要下载该页面的一部分。好的，如果它是文档资产/资源（您将其设为<img>，或者您使用new Image通过javascript下载，则可能。
onload，将触发功能。 gif将转换为JSON。我不知道你的意思，也许你想通过Base64编码转换为数据URL。
...
利润！

在您继续获取利润之前，我无法清楚地看到您希望在第4步实现的目标。

是否将gif转换为JSON服务器端或客户端？

无论如何，如果你只是想通过XHR下载那个JSON而不阻止页面加载（也许你的意思是包含资产），但是在DOM在内存之后，你可以使用DOMContentLoaded事件监听器来{ {1}}。并且由于XHR默认是异步的（除非你不这样做），其他javascript操作应该照常进行。

顺便说一句，如果您有澄清，请将其添加到您的问题中。有关如何在不阻止的情况下下载JSON的部分，您可以对此答案进行评论。

保存图像中的数据

2 个答案: