修复 IE 中缓存图像的 .load() | CSS-Tricks

John Jimenez

# 2010 年 3 月 19 日

这种方法可能会真正伤害一些 CDN 服务器。通过使用 '?[你想要的任何随机性]' 来调用图像，你正在创建该文件的副本，该副本会在服务器场中传播，该文件名为额外的随机性。

someImg.jpg -> someImg.jpg 被传播到 CDN。
someImg.jpg?20100318000302 -> someImg.jpg?20100318000302 被传播到 CDN。
someImg.jpg?20100318000303 -> someImg.jpg?20100318000303 被传播到 CDN。

在没有使用 CDN 的小型网站上，这可能是一种很好的方法，但它不是高端网站（CNN.com、PGATOUR.com、NBA.com 等）的可行选择。

Eliazer

评论的永久链接# 2010 年 3 月 19 日

谢谢，在这种情况下你会建议哪种解决方案？

再次感谢。
John Jimenez

评论的永久链接# 2010 年 3 月 23 日

对不起，Eliazer，对于这种情况我仍然没有解决方案。
我只是想强调一下，因为我的团队因为使用这种方法而受到严厉的批评，我希望能帮助其他人尽可能地避免这种情况。

Mark

# 2014 年 3 月 21 日

为了避免破坏缓存和 CDN，我将图像的 MD5 作为参数追加，这也有助于强制浏览器更新缓存的 CSS 文件。以下是一个从 PHP 发出的缓存 CSS 链接的示例，图像链接应该以相同的方式构建

<?php
    // returns the URL with its MD5 appended as a variable (used to force browsers to update their cached stylesheets)
    function AppendMD5Variable($url)
    {
        // get the $url's md5
        $md5 = md5_file($url);
        // return the url with the md5 appended as a variable
        return $url.'?md5='.$md5;
    } 
?>
<link rel="stylesheet" href="<?php echo AppendMD5Variable("http://www.somesite.com/wp-content/themes/company/reset.css") ?>" type="text/css" media="all" />

它发出

<link rel="stylesheet" href="http://www.somesite.com/wp-content/themes/company/reset.css?md5=d18499a24db47778f4147ee7a6b84434" type="text/css" media="all" />

希望这对某人有所帮助（我希望格式正确，之前没用过 ‘markdown’）。

Justin

# 2010 年 9 月 21 日

jQuery 1.4.2 已经为你做了这件事（使用 $.ajax() 函数）。只需在 AJAX 设置中将 cache : false 设置为 false，它就会为你完成。

TeMc

评论的永久链接# 2010 年 12 月 14 日

这与 AJAX 请求无关，而是关于正常的 img 标签，并在图像加载时触发函数（即 [img onload=this-function /]），而不是关于 $(target).load('http address', function(){});，这完全是不同的东西。

jQuery 有几个名称相同的函数，根据上下文，某个东西可能意味着不同的东西。

例如，click() 意味着触发点击事件，但 click(function(){ }), 意味着绑定点击处理程序。

另请参见
https://api.jqueryjs.cn/load/
https://api.jqueryjs.cn/load-event/

ben

# 2011 年 4 月 1 日

感谢你的建议。我认为在这种情况中我会采取略微不同的方法。这样做的问题是，你失去了所有其他浏览器中图像缓存的所有好处，我不想仅仅因为 IE7 而降低所有人的体验。

相反，我将保留 .load 函数，但也会使用一个 setTimeout 函数来执行与 load 相同的操作（因为在我的情况下，它只是删除了一个类，所以这不是问题）。当然，可能还有更好的方法。有人知道吗？

ben

# 2011 年 4 月 1 日

哦，我在这里找到了答案

http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

参见评论-4731

Matt

评论的永久链接# 2013 年 6 月 5 日

Ben，你找到了一个很棒的答案！！！

这是一个更好的解决方案。Chris 应该把它添加到他的博文中！！！

它不会破坏缓存，而且在旧版本的 IE 中也能正常工作。

nme

# 2011 年 7 月 2 日

正如 John Jimenez 提到的，给定方法会增加 CDN 的命中率，有一种更简单的方法可以实现这一点，以下是用伪代码表示的：

$('img').each(function() {
    if ($(this).height() > 0) {
       our callback
    } else {
       $(this).load(function() {
         our callback
       });
    }
});

Bhanu Pratap

# 2011 年 9 月 27 日

谢谢。现在它在所有浏览器中都能正常工作了。

var url = 任何动态 URL；
var img = new Image();
$(“<img/>”) // 为了避免 CSS 问题，创建图像的内存副本
.attr(“src”, url+ “?” + new Date().getTime())
.load(function() {
// 执行任何操作
});

vishal suri

评论的永久链接# 2013 年 9 月 3 日

您好，bhanu partap，我需要您的帮助，我遇到了同样的问题，但无法得到明确的解释

Adam Wadsworth

# 2011 年 10 月 31 日

我遇到了同样的问题，但不知道从哪里开始解决。有人能花两分钟时间看一下这个问题吗？
URL: http://www.media21a.co.uk/development/unknown/

任何/所有帮助都会得到认可，谢谢。

Miro Hristov

# 2011 年 11 月 5 日

这里有一个您可以使用的一行解决方案，而不是 $(‘img’).load(function(){ //// });


$('img').each(function(){  this.src = this.src + '?random=' + (new Date()).getTime()}).load(function(){
 alert("will alert even in IE")
});

Rytis Lukoševičius

# 2012 年 3 月 14 日

我在制作的网站之一上遇到了这个问题，实际上有一种更好的解决方法。事实证明，如果你先添加 “load” 然后再更改图像的 “src”，这个错误就会被修复。

所以，实际上最好的方法是

$('img').load(function() { ... }).attr('src', 'new_image_source');

它对我在多次运行时，针对相同的已缓存图像都非常有效。

祝您愉快

Gemma D Lou

评论的永久链接# 2012 年 10 月 3 日

嘿，Rytis，谢谢！现在它在 IE9、IE8、IE7、Chrome、Mozilla 和 Safari 中完美运行。:)
Henrique Müller

评论的永久链接# 2014 年 10 月 31 日

哦，天啊。这个答案好久不见了，但它仍然救了我一命！

谢谢！
Shafiq

评论的永久链接# 2016 年 5 月 6 日

你能告诉我如何在纯 JavaScript 中做到这一点吗？我尝试在 onload 函数中更改 src，它一直在调用源 URL 并不断更新图像，这很有道理。如何让它只运行一次，使用你的解决方案？我尝试在 img 上添加一个空的 load 函数，然后再更改 src，但这没有帮助。

谢谢

franz

# 2012 年 3 月 15 日

感谢你，Rytis！非常简单，但非常有效。确实很有道理；)

Mark

# 2012 年 4 月 26 日

感谢上帝，有这个页面。还要感谢 Rytis 和 Chris。

Jet

# 2012 年 6 月 16 日

根据你的操作，这也有效
$('').load(function() { // }).load();
所以，是的，在其他浏览器中，你的函数可能会被调用两次，但这不难检查。

Reinier Kaper

# 2012 年 6 月 20 日

Rytis：你救了我！
IE7 在这方面给我带来了很大的麻烦，我并不喜欢使用追加时间戳的方法，因为之前已经提出了相关问题。

谢谢！

Rytis Lukoševičius

# 2012 年 6 月 20 日

很高兴我能帮上忙 :) 它也拯救了我的理智 :D

alex lacayo

# 2012 年 6 月 21 日

感谢 Rytis 的建议……这对我有效


    $('.look-book-wrapper img').each(function() {
	
	   var new_image_source = ($(this).attr('src'));	
 
       $(this).load(function() {
    		$(this).fadeIn('slow');
    	})
    	.attr('src', new_image_source); 
    	//.attr({src: $(this).attr('src') + '?time=' + (new Date()).getTime() });
    });

Bjørn T.

# 2012 年 7 月 5 日

Rytis：感谢你拯救了我的这一天，以及我仅存的一点头发，都是因为那些令人沮丧的经历。

awpross

# 2012 年 7 月 10 日

这不仅与 IE 有关。Chrome 和我的 Android 手机也有同样的行为。我在图像加载时立即将 data-field 设置为 true，并触发 load 事件。在整个窗口加载完成后，我检查所有 data-field 尚未设置为 true 的元素，并为这些元素执行我的函数。所以函数不会对每个图像调用两次，并且它总是会被触发，无论图像是否被缓存。

$(document).ready(function () {

  $(“#Events img”).each(function (i) {
    $(this).data(“shown”, false);
    $(this).bind(“load”, function () {
      $(this).hide().delay(500 * i).fadeIn(2000); // <– This is my function to call
      $(this).data("shown", true);
    });
  });

  $(window).load(function () {
    $("#Events img").each(function (i) {
      if ($(this).data("shown") == false) {
        $(this).hide().delay(500 * i).fadeIn(2000); // <– This is my function to call
      }
    });
  });

});

Gabriel Oliveira

# 2012 年 7 月 15 日

非常感谢！它工作得很好！

Abolfazl Beigi

# 2012 年 10 月 18 日

非常感谢。像往常一样有用。

Ian Brown

# 2012 年 10 月 25 日

Rytis，你是最棒的！谢谢。

Thanos

# 2012 年 11 月 8 日

哦！你有什么不知道的吗？
我更喜欢 Chris 的解决方案，因为它更适合我的代码。

John

# 2013 年 1 月 24 日

为什么你要用 jQuery 两次包装它？

myImge = $("")
$(myImge).load(...)

这等同于 $($("<img />"))

Hank

# 2013 年 2 月 5 日

非常感谢 Nme，检查高度而不是使用 load 是解决旧版本 IE 问题的方法，这些版本不会第二次触发 load 函数。
先生，你拯救了我的这一天。

JR Galia

# 2013 年 2 月 21 日

谢谢 rytis。

Nut315

# 2013 年 2 月 27 日

关于一些答案的说明。$("#element").load(function() { }); 从 jQuery 1.8 开始已被弃用，应该替换为以下内容


$("#element").bind("load", function() { });

Raghav

# 2013 年 3 月 5 日

感谢您的帖子。我遇到了完全相同的问题。我使用您的代码以直接的方式解决了它

Lucian Adamson

# 2013 年 3 月 29 日

我知道浏览器嗅探被认为是不好的做法，但是对于像这样的情况，检查支持不是您需要的，我认为它是合理的。正如之前一位评论者所说，为什么为了选择被诟病的 IE 路线的其他用户，而牺牲其他人的缓存并减慢他们的体验呢？您只需检查浏览器是否为 IE 并应用此方法，如果您不使用 CDN 的话。

Patrick

# 2013 年 6 月 6 日

我认为我找到了一个更好的解决方案，它 **a)** 无论您何时附加 onload 处理程序——在设置 src 之前或之后——都能工作，并且 **b)** 不会在服务器上创建图像副本。

事实证明，您不必向图像添加随机查询参数。只需执行以下操作

$("img").attr("src", $("img").attr("src"));

如您所见，src 属性设置为与之前相同的值。这样，IE 甚至不会重新加载图像，它只会触发 onload 事件，这正是我们想要的。:-)

vipul

# 2013 年 8 月 9 日

这里有更好的 jQuery 解决方案。

$("img").one('load', function() { // 您的代码在这里 }).each(function() { if(this.complete) { $(this).load(); } });

dosporto

# 2013 年 8 月 26 日

谢谢。更多解决方案请查看
http://fiverr.com/dosporto/fix-your-javascript-jquery-jquery-mobile-issues

Pete Jones

# 2013 年 9 月 4 日

在查询字符串中使用“#”而不是“？”有什么好处吗？我见过一些情况，其中“#”仍然会使用缓存的图像，而不是缓存破坏的“？”——例如 http://www.post-hipster.com/2008/10/20/using-javascript-to-refresh-an-image-without-a-cache-busting-parameter/

Brad

评论永久链接# 2013 年 10 月 10 日

这似乎是一个有效的观点。我正在上班，无法阅读链接的文章，但我认为井号可能比参数问号的破坏性更小。

MRX

# 2013 年 10 月 30 日

解决方案：https://gist.github.com/paulirish/268257

Mark

# 2013 年 11 月 4 日

嗨，我需要加载 div 的背景图像。

<div id="low"></div>
<div id="high"></div>

当我点击 low 时，我需要显示带有背景图像的 high。在 Chrome 等浏览器中我有解决方案，但在 IE 中，点击后 div 的背景会闪烁。

感谢您的建议。

thinsoldier

# 2014 年 10 月 9 日

似乎 Firefox 33 在处理缓存图像的 load 事件方面也同样不可靠。:(

Nabi

# 2014 年 11 月 7 日

实际上，有一些方法可以正确处理缓存的图像。我写了一些关于它的教程

使用 jQuery 加载图像并处理事件以显示加载微调器

如果您想使用本机 Javascript 而不使用任何 jQuery，您可以查看我的另一个教程

使用本机 JavaScript 加载图像并处理事件以显示加载微调器

Mehak Aggarwal

# 2018 年 5 月 19 日

我可以轻松地处理这个问题

Broxer

评论

发表评论 取消回复

发表评论取消回复