一尘不染

php / Ajax-预加载图像的最佳做法

ajax

我整理了一个非常类似于flickr照片流功能的脚本。两个缩略图彼此相邻,当您单击下一个或上一个链接时,下一个(或上一个)两个图像就会滑入其中。

当前,页面加载时将加载两个图像。第一次使用nxt /
prv时,随后的两个图像或前两个图像通过ajax加载,第一个图像的ID在url中传递,而两个新图像的HTML通过ajax返回并显示。

足够简单,但是我不得不考虑在连接速度慢或服务器负载重的情况下,这两个图像,尽管相对较小的缩略图仍可能需要一段时间才能加载,而使用滑动窗格的好处是隐藏数据可以顺畅地快速滑动,而不会延迟加载。

因此,我从性能和良好实践的角度出发,想知道哪种选择最好,这是我目前可以想到的,可以接受的建议。

1,通过JSON调用每组图像(它应该很快吗?)

2,将所有可能的图像加载到json文件中,然后以这种方式输入详细信息-尽管浏览器仍必须加载图像。再加上有时可能有4张图片,其他时候可能多达1000张!

3,通过php将10个图像加载到Json或其他文件中,然后将所有10个图像加载到浏览器中,以隐藏未显示的8个图像,并始终显示中间的两个图像。这里的问题是,每次有人单击时,文件都必须重新加载第一张和最后一张图像,这仍然会占用时间,尽管我想现在中间图像将全部通过浏览器进行缓存。但是仍然有加载时间。

4,是否有可能包含所有图像细节的json图像(不考虑数字),并且使用上面的No
3来加载其中的10张图像,是否可能使用Ajax仅读取10行并保留最后一个指针它读取一个,因此可以快速加载json文件,短暂刷新,并且可以通过浏览器缓存任一侧的图像!

希望这很清楚,关于您将如何处理此问题的任何建议?


阅读 207

收藏
2020-07-26

共1个答案

一尘不染

要从Javascript预加载图像,您无需执行听起来像AJAX或JSON的任何操作。您需要的是:

var img = new Image();
img.src = "http://example.com/new/image.jpg";

即使没有在任何地方显示,浏览器也会很高兴地在后台加载图像。然后,当您更新src另一个(显示的)图像标签的字段时,浏览器将立即显示已加载的图像部分(希望全部)。

2020-07-26