Question

我有一个Laravel网络应用程序，我开发该应用程序用作办公室（眼科）的视力表。因此，请想象一下在图表上看到大E和所有逐渐变小的字母。除了执行速度外，我所有功能均正常运行。当我按下键盘按钮时，字母并不能很快改变，这让我有些难过。我想我已经将其缩小到渲染图像的范围了吗？（这些字母实际上是单独的PNG文件，不仅仅是屏幕上的一种字体），但是最大的是47kb，而不是很大的内容。我遇到的问题是，当我排队换线时，屏幕上会加载5张图像供患者阅读。但是它们都需要花费相当长的时间才能加载。有时大约需要7秒。我正在运行的Intel i5处理器可以达到1.9GHz。我真的不这么认为。我将其本地托管在WAMP堆栈上的最新apache服务器中。如果我连续不断地加载线，图像开始将其加载时间减少到更合理的水平。但是，如果我让页面静置5分钟，然后再返回页面，就好像它重置了一样，必须重新重新加载所有图像5秒钟以上。有人知道对此有任何潜在的解决方法吗？我知道这听起来可能很宽泛，但是这个难题有很多方面，甚至我都不知道从哪里开始。 chrome是否会自动缓存图像？目前，我仅通过调用对laravel中“ public / imgs”文件夹中路径的引用来加载它们。有没有更有效的方法可以做到这一点？赞赏任何方向的任何帮助，只想使其响应更快。旁注：我可以流式传输youtube视频并在其他网站上很好地加载图像内容，这就是为什么我如此困惑的原因，为什么我的小图像文件需要这么长时间才能加载。如果有人需要，可以检查该项目的github是github.com/maximus1127/eyechart。该应用程序正在使用socket.io，redis和node。因此，如果您想下载它以进行玩耍，则需要配置这些内容。但是呼叫和消息几乎是立即发送的，我真的认为这只是图像加载的麻烦。

Answer 1

每次更改设置时，图像似乎都已加载到页面中。每次更改时，您都将img元素添加/删除到DOM中。

$('#line1').html("<img src='/images/" + image[size[1]] + "'/> <img src='/images/" + image[size[2]] + "' /> <img src='/images/" + image[size[3]] + "' /> <img src='/images/" + image[size[4]] + "' /> <img src='/images/" + image[size[0]] + "' />" );

您可以尝试在首次加载页面时预加载所有图像一次，然后根据您选择的选项使用jquery代码在页面上隐藏/显示/移动它们。

<div class="display">

</div>

<div class="hidden">
    <img id="size-1" src="/images/...">
    ...
</div>

然后：

$('.display').append($('#size-1'));

或者类似的东西……你明白了。

如何使用socket.io加速laravel应用

1 个答案: