使用 jQuery 更改图像 src 属性并不总是适用于 Chrome/Opera答案

【问题标题】：Changing an image src attribute with jQuery not always applied in Chrome/Opera使用 jQuery 更改图像 src 属性并不总是适用于 Chrome/Opera
【发布时间】：2015-06-13 00:59:16
【问题描述】：

我有以下代码用于检索我网站上照片的一小部分高分辨率。这个想法是让人们在决定是否购买之前先了解一下原件的质量：

$('#magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
});

由于某种原因，它是间歇性的。 Fiddler 显示 sn-p 始终加载，但有时仅显示。即使它不显示，load() 事件中的代码也能正常运行。

所以它认为它已加载，Fiddler 显示它已加载，但大约 50% 的时间它实际上并没有显示它应该显示的位置。

在我家的台式机上发生这种情况的情况往往较少，而当我外出时在我的笔记本电脑上发生的情况更多，所以我想知道这是否与资源有时加载速度有点慢有关......？

有什么想法吗？

编辑：这实际上似乎仅限于 Chrome 和 Opera，它在 Firefox/IE11 中运行良好

【问题讨论】：

magViewCountdown 是做什么的？
无相关信息 - 只是更新 clicktoenhance 文本 - 显示倒计时，然后在倒计时完成后隐藏该框。
@Codemonkey 你不在 Chrome 和 Firefox 中使用 Adblock 插件吗？也许他们不喜欢你图片 src 中的“.php”
@Codemonkey 如果我去 '/photos/original-sn-p.php?id=123 ..' 会发生什么？
没有广告屏蔽等。如果您访问该 URL，您会看到该图像，就像您浏览到 my-photo.jpg 一样。如果您想知道，它提供了正确的 mime 类型。

标签： jquery image src

【解决方案1】：

使用 .load() 加载图片：

$('#magviewplus').load('/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top, function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
});

【讨论】：

我试过了，它似乎根本不起作用，并查看似乎适用于 HTML sn-ps 的 jquery 文档，因此在这种情况下它不起作用。

【解决方案2】：

您可以使用 Image onload 事件。

当图像完成加载时，将在图像元素上调用此事件处理程序。

代码

var url = '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top;

var img = new Image();

img.onload = function () { 
    //When load's sucessfully
    $('#magviewplus').prop('src', url); 

    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
};

img.onerror = function () { 
    //When load's fails
}; 

img.src = url; //Set URL

【讨论】：

您应该在设置 .src 之前定义 onload - 但是它与 jQuery.load 不同吗？
不幸的是，这似乎表现出完全相同的问题。
@Codemonkey，你在其他地方使用相同的网址吗？

【解决方案3】：

已编辑以表明这不起作用...

起初，一个务实的“解决方案”似乎是删除并重新添加图像：

<div id="magviewholder"><img id="magviewplus" src="pixel.gif" alt=""></div>

像这样：

$('#magviewholder').children("img").remove()
$('#magviewholder').append('<img>');

$('#magviewholder>img').attr('onerror','imgError(this)').attr('id','magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() {
     window.clearInterval(maginterval);
     magtimer=3;
     maginterval=window.setInterval(magViewCountdown,1000);
     $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
 });

起初这似乎适用于所有浏览器，但现在似乎一样断断续续......

【讨论】：

你能提供导致图像显示的步骤吗？例如...User clicks on image.. user taken to page X... page loads... on page load the image src is replaced... on some other function x happens...为什么还要使用负载？也许提供一个你在做什么的演示？

【解决方案4】：

问题可能与取决于浏览器及其设置的客户端资源缓存策略有关。如果是这样，您可以通过将随机数作为参数附加到地址字符串来强制重新加载图像。从服务器的角度来看，这个参数是没有意义的，但是对于浏览器来说，它是一个全新的资源，甚至实际上是一样的。下面的示例说明了这种方法：

$('#loadbtn').click(function(){
  $('#msg').html("loading...");
  $('#myimg').attr("src", "http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1" + 
    "&rnd=" + Math.random());
});

$('#myimg').load(function(){
  $('#msg').html("loaded");
});

#loadbtn {
  margin: 16px;
}
#msg {
  margin: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='myimg' src='http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1' />
<div>
  <input type=button id='loadbtn' value='reload' />
</div>
<div id='msg'>loading...</div>

【讨论】：

我在问题中明确表示我可以看到 Fiddler 中正在加载的资源。因此，这不是缓存问题。而且大多数请求已经是新的/独特的。

【解决方案5】：

您的问题似乎有据可查，从以下帖子可以看出：

我建议您将新图像加载到内存中，然后当该新图像的加载事件触发时，更改实际图像的 src 并执行其他任何需要完成的操作。原始图像保持不变，附加到它的任何其他事件（加载除外）应保持不变：

$(new Image()).attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x=' + left + '&y=' + top).load(function() {
    $('#magviewplus').attr('src', this.src);
    window.clearInterval(maginterval);
    magtimer = 3;
    maginterval = window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in ' + magtimer + 's...');
});

DEMO

【讨论】：

我仍然坚持认为我的问题不是关于加载事件本身......但是将 src 加载到内存中然后分配（通过加载事件......）到图像确实似乎有固定的东西，我想。我会测试一整天，看看它在接受之前是否始终如一地修复。
在您完成测试后告诉我您的发现。而且，如果您弄清楚您认为可能导致问题的原因，请随时分享；如果你能提供一个演示，那将是找到根本原因的一大步。
我不得不调整一些缓存以避免使用您的代码两次加载图像（这显然减慢了速度），但现在我已经完成了一切似乎都很好。恐怕我没有时间或意愿将其破解为演示...... :(

【解决方案6】：

尝试将“name”属性放入标签中，与“id”属性具有相同的值。

<id="magviewplus" name="magviewplus".../>

以这种方式，即使在 chrome 中，jquery 也可以检测到属性并正确更改，在 jquery 的较旧版本中，如果可行，我会忽略，希望对您有所帮助

【讨论】：