jquery - 使用 jQuery AJAX 获取图像的最有效方法

Question

读者摘要版本:从服务器请求图像并使用 AJAX(或 AJAI，也许？:))将其放入 DOM 中的最有效方法是什么？这是长版本:

您好，我正在设置一个包含项目列表的简单页面，当您单击其中一个项目时，它会执行以下操作:

1. 清除页面(隐藏)上先前图像(如果有)的模式对话框
2. 请求/url/ajax/some-image/的页面
3. 打开模式对话框，其中显示微调器
4. 对服务器的请求完成后:将该页面的 HTML 注入(inject)模式对话框

上面请求的页面会搜索数据库以查找与给定 URL 匹配的条目，并返回一个 HTML 页面，内容为 <img src="path/to/image.jpg" alt="Whatever this would be." /> 。我不确定 jQuery 是否为我节省了一些魔法来提高效率，但在我看来，请求一个页面来请求另一个图像正在做比需要做的更多的工作。我正在寻找的东西更像是这样的:

1. 清除之前图像的模式对话框
2. 通过 /url/ajax/some-image/ 索取图片(我可以将其设置为返回图像本身，而不是图像的 <img/> 标签)
3. 打开模式对话框，其中显示微调器
4. 对服务器的请求完成后:将图像直接注入(inject)模式对话框

我遇到的问题是......怎么办？我在看$.get ，这对我来说似乎是最有意义的，但我有点超出了我的想象——我对 JavaScript/jQuery 还很陌生。

我已设置 some-image 的值rel 的 URL 的一部分<a> 的值它对应于(澄清一下:这是在服务器端完成的)，因此我可以在 click() 中轻松构建图像的 URL事件的函数被触发时，模式对话框只是 div#dialog 。这可以通过更改src这样简单的事情来完成吗？ <img/>的？

Answer 1

Zack，我认为您缺少的是浏览器将为您执行“GET”操作。

当您使用 JavaScript 将 html 注入(inject)页面时...如果该代码包含 <img>标签，浏览器将调用该源 URL 并为您检索图像。您不必再做$.get从 JavaScript 调用以获取图像。

因此，您所要做的就是确保从 $.get 返回的 html包含具有正确 url 的图像标签，浏览器会完成其余的工作。

希望对您有所帮助。