如何动态单击所有列表项而不显示其默认行为的结果但不可见地加载其内容？答案

【问题标题】：How to dynamically click on all list items without displaying the results of their default behavior but invisibly loading their contents?如何动态单击所有列表项而不显示其默认行为的结果但不可见地加载其内容？
【发布时间】：2015-09-27 23:06:34
【问题描述】：

我想动态单击一组无序列表项而不显示单击结果。目的是预加载单击列表项通常会加载和显示的动态内容，例如图像和文本；我想在用户开始点击列表项之前尽可能多地预加载内容。（我从另一位开发人员那里继承了代码，我不得不在他的常规限制内工作，所以请多多包涵。）

每个列表项都有一个 ID，例如：

id="w273"
id="w175"
id="w123"

这些将是我的参考。列表项是动态生成的，每个项都包含一个 HREF，指向将显示在页面的散列区域中的内容（内容由服务器加载的图像和使用查询从 SQL 数据库中提取的文本组成）。

通常，单击列表项会更改页面该区域的内容，但加载需要时间。但是，一旦它被加载，它可以在不重新加载的情况下重新显示，当然，因此重新访问它是即时的……这是第一次访问需要时间。

因此，我想通过连续动态单击每个列表项来预加载该内容的所有，而不显示结果内容，所有这些都在背景，保留默认内容（使用点击列表中的第一个 ID 自动检索）。（我提到这个细节是为了说明页面最初加载时会显示第一个列表项的内容，并且该行为应该保持不变。）

我如何使用 Javascript 或 JQuery 来完成此任务？

更多信息

好的，这是瘦的。内容由包含来自内部 php 脚本的内容的主要包含 php 脚本通知。外部脚本创建一个图像轮播，其缩略图将内部脚本引用为哈希。在任何给定点，URL 都将采用以下形式：

g.php?g_id=45#a.php?a_id=238

外部脚本是“g.php”脚本。它引用由“a.php”脚本标识的轮播中的缩略图图像，其 GET 值是在页面上加载内部内容的关键。

轮播中的各个缩略图是这样 HREF 的：

<li><a href="#a.php?a_id=467" id="w467"><img src="thumb_image.jpg" /></a></li>

所以点击这个会将之前的 URL 修改为：

g.php?g_id=45#a.php?a_id=467

但请注意，“g.php”脚本生成的内容因此不会改变。当单击轮播中相应的缩略图时，内部的“a.php”内容会随着散列变化而切换。这是一个非常有效的解决方案，但有一些注意事项。

主要需要注意的是，除了第一个链接引用的内容（对应于轮播中的第一个缩略图）之外，没有预加载任何内容，并且该行为被硬编码到例程中并且很好。

我只是想动态单击列表中的每个链接以加载所有内容，并在页面加载并暴露第一个链接的内容后在后台执行此操作（这是它的默认行为，并且，正如我'已经说过，这很好）。它必须在无形中进行。

它发生的顺序也无关紧要，因为用户可能会立即推进轮播并点击其中的第 14 个元素而不是第 2 个元素。所以，我不想以 10 个或类似的增量分批预加载内容，等待用户与轮播交互以加载更多内容；这没有任何意义，前提是轮播的设计以及它打算如何以任何非顺序方式使用。

我只需要遍历所有列表项链接并以不可见的方式加载它们 — 以任何顺序加载它们，前提是 AJAX 的异步特性。用户会点击预加载例程已预加载的链接之一，但如果用户向前跳转并选择仍在预加载过程中的内容，这不是问题;当用户检查该内容时，其余内容将被预加载。

所以，这是更多信息。我希望这为理解我所面临的问题提供了一个更好的背景。在不完全重写整个例程的情况下，最好的办法似乎是接受它自己的机制并通过循环通过一个 AJAX/JQuery 例程来适应它，一旦页面显示其初始内容，该例程就会在后台动态单击并预加载所有数据。而且我确实可以访问无序列表中链接的 ID；其他识别信息可以很容易地添加到其中。

【问题讨论】：

文本不是问题，可能是许多大图像的异步加载 - 可能无法按所需顺序开始加载。您首先缺少显示更多代码并告诉您尝试了什么以及失败的原因。您的内容在哪里？
参见上面添加的“更多信息”部分。

标签： javascript jquery html list dynamic

【解决方案1】：

文本不是问题，问题可能是异步加载许多大图像 - 可能无法按所需顺序开始加载。
不要将图像加载到隐藏在文档中的某个位置，而是从服务器获取一个 JSON 来保存所有需要的数据。

您不需要逐一模拟点击，
您需要简单地获取即：前 10 张图像，并且随着用户的前进，加载越来越多（这里的想法是避免加载用户可能永远不会探索/看到/使用的东西） - 但这一切都取决于用户你有的接口。

JSON 示例：

[
  {
    "id" : "w125",
    "image" : "path/to/image1.jpg",
    "content" : "HTML or whatever"
  },{
    "id" : "w275",
    "image" : "path/to/image2.jpg",
    "content" : "HTML or whatever is the content"
  }
]

【讨论】：