php / Ajax-预加载图像的最佳做法
我整理了一个非常类似于flickr照片流功能的脚本。两个缩略图彼此相邻，当您单击下一个或上一个链接时，下一个（或上一个）两个图像就会滑入其中。
当前，页面加载时将加载两个图像。第一次使用nxt /
prv时，随后的两个图像或前两个图像通过ajax加载，第一个图像的ID在url中传递，而两个新图像的HTML通过ajax返回并显示。
足够简单，但是我不得不考虑在连接速度慢或服务器负载重的情况下，这两个图像，尽管相对较小的缩略图仍可能需要一段时间才能加载，而使用滑动窗格的好处是隐藏html" target="_blank">数据可以顺畅地快速滑动，而不会延迟加载。
因此，我从性能和良好实践的角度出发，想知道哪种选择最好，这是我目前可以想到的，可以接受的建议。
1，通过JSON调用每组图像（它应该很快吗？）
2，将所有可能的图像加载到json文件中，然后以这种方式输入详细信息-尽管浏览器仍必须加载图像。再加上有时可能有4张图片，其他时候可能多达1000张！
3，通过php将10个图像加载到Json或其他文件中，然后将所有10个图像加载到浏览器中，以隐藏未显示的8个图像，并始终显示中间的两个图像。这里的问题是，每次有人单击时，文件都必须重新加载第一张和最后一张图像，这仍然会占用时间，尽管我想现在中间图像将全部通过浏览器进行缓存。但是仍然有加载时间。
4，是否有可能包含所有图像细节的json图像（不考虑数字），并且使用上面的No
3来加载其中的10张图像，是否可能使用Ajax仅读取10行并保留最后一个指针它读取一个，因此可以快速加载json文件，短暂刷新，并且可以通过浏览器缓存任一侧的图像！
希望这很清楚，关于您将如何处理此问题的任何建议？
问题答案：
要从Javascript预加载图像，您无需执行听起来像AJAX或JSON的任何操作。您需要的是：
var img = new Image();
img.src = "http://example.com/new/image.jpg";
即使没有在任何地方显示，浏览器也会很高兴地在后台加载图像。然后，当您更新src另一个（显示的）图像标签的字段时，浏览器将立即显示已加载的图像部分（希望全部）。
-
问题内容： Angular的ng- src会保留以前的模型，直到它在内部预加载图像为止。我在每个页面上的横幅使用不同的图像，当我切换路线时，我更改主视图，保留标题视图，仅在拥有它时更改bannerUrl模型。 这导致在加载新的横幅图像时看到先前的横幅图像。 令我惊讶的是，目前还没有指令，但是我想在尝试构建指令之前先进行讨论。 我想做的是在自定义属性上设置横幅模型。喜欢： 然后$ scope.wat
-
问题内容： 我完全意识到，无论是在SO还是离线状态下，这个问题在任何地方都被提出并得到了回答。但是，每次似乎都有不同的答案，例如this，this和that。 我不在乎是否在使用jQuery-重要的是它可以工作，并且是跨浏览器的。] 那么，预加载图像的最佳方法是什么？ 问题答案： 不幸的是，这取决于您的目的。如果您打算将图像用于样式目的，则最好的选择是使用精灵。 但是，如果您打算使用标记中的图像，
-
问题内容： 我有一个隐藏的联系表单，单击该按钮即可进行部署。它的字段设置为CSS背景图像，它们的出现时间总是比已切换的div晚一点。 我在本节中使用了此代码段，但运气不好（清除缓存后）： 我正在使用jQuery作为我的库，如果我也可以使用它来解决此问题，那将很酷。 多谢您的光临。 问题答案： 我可以确认我的原始代码似乎有效。我随便坚持使用错误路径的图像。
-
问题内容： 我想为我的jquery ajax代码（这是jquery仍在处理时）实现一个加载图像，下面是我的代码： 如何在此代码中实现加载图像。谢谢 问题答案： 尝试这样的事情：
-
问题内容： 我正在寻找一种快速简单的方法来用JavaScript预加载图像。如果重要的话，我正在使用jQuery。 但是，对于我想要的东西来说似乎有点过高了！ 我知道那里有执行此操作的jQuery插件，但它们看上去都很大（大小）；我只需要一种快速，轻松和简短的方式来预加载图像！ 问题答案： 快速和简单的： 或者，如果您想要一个jQuery插件：
-
问题内容： 我在下面编写的功能是否足以在当今大多数（如果不是全部）浏览器中预加载图像？ 我有一个图像URL数组，可以循环访问这些URL，并为每个URL 调用该函数。 问题答案： 是。这应该适用于所有主要的浏览器。