Javascript - 单击加载图像

发布于 2024-09-29 13:41:48 字数 1179 浏览 2 评论 0原文

好的，我实际上正在调用一些返回验证码图像的 java 中间件。验证码图像在页面加载时加载到页面中只需：

<a href="#" id="ci"><img id="stickyImg" src="stickyImg" /></a>

我想在当前验证码图像的单击时重新加载验证码图像。我尝试了一些方法，但没有任何效果。

我所说的“尝试了一些事情”是指我已经尝试过：

$("#ci").click(function(){

        $("#stickyImg").load('stickyImg');

        return false;
    });

它确实加载了图像，但它是通过将原始二进制图像数据放置在图像标签内来实现的，所以我得到：

pngbinarygibberishsymbols

嗯...也许我需要指定将图像放入 src 属性？也许？大家觉得怎么样？

编辑：

呃！将响应放入我的 img src 中会导致：

<img src="    * captcha image�PNG  ��� IHDR�������Ketc, etc">

输出原始二进制数据。到底是什么？

解决方案：

该解决方案来自我就此发表的另一篇类似的帖子。您可以在这里阅读相关内容.

最后，有效的代码（*由 Lee 编辑）如下所示：

$("#ci").click(function(){

        $("#stickyImg").attr('src', 'stickyImg?' + (new Date().getTime())); 
        return false;
    });

原文

OK, I'm actually calling some java middleware that returns a captcha image. The captcha image loads in the page on page load simply with:

<a href="#" id="ci"><img id="stickyImg" src="stickyImg" /></a>

I want to reload the captcha image onclick of the current captcha image. I've tried a few things but am not getting anything working.

By "tried a few things" I mean I have tried:

$("#ci").click(function(){

        $("#stickyImg").load('stickyImg');

        return false;
    });

which indeed loads the image but it does it by placing the raw binary image data inside the image tag so I get:

<img src="stickyImg"><img xmlns="http://www.w3.org/1999/xhtml">pngbinarygibberishsymbols</img>

Hmmm... maybe I need to specify putting the image into the src attribute? Perhaps? What do you all think?

EDIT:

Ugh! Putting the response into my img src results in:

<img src="    * captcha image�PNG  ��� IHDR�������Ketc, etc">

The raw binary data being output. What the heck?

SOLUTION:

The solution comes from another, similar, post I made on this. You can read about it here.

In the end the (*edited thanks to Lee) code that works looks like:

$("#ci").click(function(){

        $("#stickyImg").attr('src', 'stickyImg?' + (new Date().getTime())); 
        return false;
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南巷近海 2024-10-06 13:41:48

如果您发布一个更完整的示例（包括将图像嵌入到初始文档中的标记），将会很有帮助；但做出一些合理的假设，我认为你只需要像下面这样的东西......

假设你的标记是这样的：

<div id="ci">
  <img src="/stickyImage" />
</div>

那么下面的 JS 应该可以解决问题：

$("#ci").click(function(){

    $("img",this).remove();
    $(this).html('<img src="/stickyImage" />');

    return false;
});

祝你好运。

[编辑] 如果您使用此代码加载在服务器上动态生成的图像（或者由于某种原因可能会定期更改），那么您还需要确保正确考虑了浏览器的倾向缓存它认为是静态的数据。通常有两种方法可以实现这一点（两者都可以）：

1）确保每次加载图像时 url 始终不同。您可以轻松地做到这一点，只需将随机数附加到图像 URL 的查询字符串部分即可。因此，在上面的示例中， $(this).html('') 将变为 $(this).html(' ')。（这本质上与OP最终决定的方法相同——请参阅上面OP的编辑）。

2) 确保服务器返回图像数据，包括响应中正确的 HTTP 标头，以指示图像是动态的且不应缓存。您可以查看更多详细信息如何在此 SO 帖子上发送无缓存标头。

以下是在 Java servlet 中设置所需标头的方法：

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.

选项 #2 可能是解决缓存问题的更“技术上正确”的方法，但正如我上面所说 - 两者都可以，并且选项 #1 是非常可靠的这种方法通常比选项 #2 容易得多。

话虽如此 - 缓存问题是与此处提出的原始问题不同的问题。最初的问题涉及 HTML 中内联二进制 blob 的显示。该问题是由于错误使用 jquery load() 函数造成的。 OP 选择了一种使用 attr() 函数来设置 src 属性的方法。我展示的方法涉及创建一个新的 img 元素，并删除旧元素。这些方法中的任何一种都可以工作，但是 load() 函数不能用于此目的。

it would be helpful if you would post a more complete example including the markup that embeds your image in the initial document; but making a few reasonable assumptions, I think you just need something like the following...

assuming that your markup is something like:

<div id="ci">
  <img src="/stickyImage" />
</div>

then the following JS should do the trick:

$("#ci").click(function(){

    $("img",this).remove();
    $(this).html('<img src="/stickyImage" />');

    return false;
});

good luck.

[edit] If you're using this code to load an image that's generated dynamically on your server (or that may change periodically, for some reason), then you'll also want to be sure that you properly account for the browser's tendency to cache data that it believes to be static. There are two way that this is commonly accomplished (either will work):

1) ensure that the url is always different every time the image is loaded. You can do this easily, by just appending a random number to the query string portion of the image url. So, in the above example, $(this).html('<img src="/stickyImage" />'), would become $(this).html('<img src="/stickyImage?"+(new Date().getTime()) />'). (This is essentially identical to the approach that the OP ultimately settled on -- see OP's edits above).

2) ensure that the server returns the image data, including the proper HTTP headers in the response to indicate that the image is dynamic and shouldn't be cached. You can see more details about how to send no-cache headers on this SO post.

Here's how you would set the needed headers from within a Java servlet:

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.

Option #2 is perhaps the more "technically correct" way to address the caching issue, but as I said above - either will work, and option#1 is a very reliable approach that is often substantially easier than option #2.

All this being said - the caching issue is a separate issue from the original question that was asked here. The original question involved display of binary blobs inline in the HTML. That problem resulted from the incorrect use of the jquery load() function. The OP settled on an approach that uses the attr() function to set the src attribute. The approach I've shown involves creating a new img element, and removing the old element. Either of these approaches will work, but the load() function will not work for this purpose.

回复收藏 0 原文