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

Question

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

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

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

上面请求的页面搜索数据库以查找与给定URL匹配的条目,并返回显示的HTML页面<img src="path/to/image.jpg" alt="Whatever this would be." />.我不确定jQuery是否能为我带来一些魔力来提高效率,但在我看来,请求一个请求另一个图像的页面正在做更多的工作而不是需要完成的工作.我正在寻找的将是更像这样的东西:

1. 清除之前图像的模态对话框
2. 请求图像/url/ajax/some-image/(我可以将其设置为返回图像本身,而不是图像的<img/>标记)
3. 用微调器显示打开模态对话框
4. 一旦对服务器的请求完成:将图像直接注入模态对话框

我遇到的问题是......怎么样？我在看$.get,这似乎对我来说最有意义,而且我只是有点太过分了 - 我是JavaScript/jQuery的新手.

我已经将some-imageURL部分的rel值设置为<a>它对应的值(澄清:这是在服务器端完成的),因此我可以在click()事件的函数中很容易地构建到图像的URL.被解雇,模态对话框就是div#dialog.难道这与为改变简单的东西做src的<img/>？

Answer 1

Zack,我认为你缺少的是浏览器会为你做"GET".

当您使用JavaScript将html注入页面时...如果该代码包含<img>标记,则浏览器将调用该源URL并为您检索图像.您无需再$.get通过JavaScript进行其他调用即可获取图像.

因此,您所要做的就是确保从您返回的html $.get包含带有正确URL的图像标记,浏览器完成剩下的工作.

我希望有所帮助.