最有效的方式使用jQuery AJAX来获取图像最有效、图像、方式、jQuery

2023-09-10 18:24:07 作者:漫漫人生路、总会错几步

读者文摘版本:什么是从服务器请求的图像并将其放入到DOM使用AJAX的最有效的方式(或AJAI,也许是:?))?这里的长版:

Reader's digest version: What is the most efficient way of requesting an image from a server and placing it into the DOM using AJAX (or AJAI, perhaps? : ) )? Here's the long version:

您好SO,我设立有项目列表一个简单的页面,当你点击一个,它执行以下操作:

Hello SO, I'm setting up a simple page that has a list of items, and when you click on one, it does the following:

清除页面上的模态对话框(这是隐藏的)图像$ P $的pviously它(如果有的话) 请求的页面 / URL / AJAX /一些图像/ 打开一个微调模态对话框,显示 一旦请求到服务器完成:从页面的HTML注入模态对话框 Clear the modal dialog on the page (which is hidden) of the image previously in it (if any) Request the page of /url/ajax/some-image/ Open the modal dialog with a spinner showing Once the request to the server finishes: inject the HTML from that page into the modal dialog

就是要求上面搜索通过数据库,寻找符合给定的URL条目的页面,并返回一个HTML页面,上面写着< IMG SRC =路径/到/ image.jpg的ALT =不管这将是。 /> 。我不知道是否jQuery是节省了我一些魔法使这种更有效的,但在我看来,请求一个页面请求另一个图像做更多的工作要做的需求。我正在寻找的将是更多的东西是这样的:

The page that's requested above searches through a database to find the entry that matches the URL given, and returns an HTML page that says <img src="path/to/image.jpg" alt="Whatever this would be." />. I'm not sure if jQuery is saving me with some magic to make this more efficient, but it seems to me that requesting a page that requests another image is doing more work than needs to be done. What I'm looking for would be something more like this:

清除图像$ P $在里面模态对话框pviously 请求形象 / URL / AJAX /一些图像/ (我可以设置为返回,而不是一个图像本身,和LT ; IMG /&GT; 标记的图像) 打开一个微调模态对话框,显示 一旦请求到服务器完成:将图像直接进入模态对话框注入 Clear the modal dialog of the image previously in it Request the image at /url/ajax/some-image/ (I can set this to return the image itself, instead of an <img/> tag for the image) Open the modal dialog with a spinner showing Once the request to the server finishes: inject the image directly into the modal dialog

我遇到的问题是......怎么样?我一直在寻找 $获得,这似乎使最有意义的我,这和我只是有点过头了我的头 - I'm很新的JavaScript / jQuery的。

The problem I'm having is... how? I was looking at $.get, which seems to make the most sense to me for this and I'm just in a bit too far over my head--I'm quite new to JavaScript/jQuery.

我已经设置了网址的的相对部分图像部分的价值&LT; A&GT; ,它对应于(澄清:这是做服务器端),这样我就可以在轻松地构建的URL图像pretty的的点击()事件的功能时,它的发射,模态对话框就是 DIV#对话框。难道这与一些简单的改变的的src 来完成的&LT; IMG /&GT;

I've set the value for the some-image part of the URL to the rel value of the <a> that it corresponds to (to clarify: this is done server-side), so I can build the URL to the image pretty easily within the click() event's function when it's fired, the modal dialog is just div#dialog. Could this be done with something as simple as changing the src of the <img/>?

推荐答案

扎克,我认为你缺少的是,浏览器会做的GET为您服务。

Zack, what I think you're missing is that the browser will do the "GET" for you.

当你注入HTML与JavaScript的网页...如果code包括&LT; IMG&GT; 标记的浏览器将调用源的URL和检索图像为您服务。你不必做从您的JavaScript另一个 $。获得调用来获取图像。

When you inject html into your page with JavaScript ... if that code includes an <img> tag the browser will call that source url and retrieve the image for you. You don't have to do another $.get call from your JavaScript to get the image.

所以,你所要做的就是确保从返回的HTML的 $。获得包括与正确的URL的图像标签,浏览器做的其余部分。

So, all you have to do is make sure that the html that is returned from your $.get includes an image tag with the correct url, the browser does the rest.

我希望帮助。

 
精彩推荐