更改src属性不更新图像

作为图像库的一部分，我使用以下代码在用户单击各种缩略图时切换图像元素上的src属性。它的每一个部分已工作的罚款约7个月，因为我建的，但有时在过去几周的这部分代码停止工作：更改src属性不更新图像

var nextLgSrc = $('.gallery-image._'+selected).data('lgsrc'); 
$('.hero-image').attr('src', nextLgSrc);

nextLgSrc被成功地返回一个绝对URL到图像这将取代目前的一个。 img元素的src实际上在点击缩略图时发生了变化，但图像不再改变。即使src属性在其下面更改，第一个（默认）图像仍然卡住。

谁能告诉我发生了什么事以及如何解决它？

这里是一个完整的库代码的链接，看看它在上下文中，如果这是有帮助的：http://pastebin.com/mae8YQi2

而实际上，这里是一个网页的链接不工作：http://penumbralux.com/project/marisol

来源

2016-02-04 Eckstein

快速检查你的主img，src没有改变，因为你点击下面的缩略图，是正确的行为？如果没有，那么你需要修改你的点击处理程序逻辑 –

我从这个例子中得到的是，你不应该改变元素的'src'，但你应该滑动滑块到单击的元素。 – Rayon

你的链接显示'data-lgsrc =“Array”'，这可能是问题所在。通过查看在控制台currentSrc值没有变化 – diEcho

时监守您点击第一张以外的图片，

您只更新src属性img。

当使用开发人员工具在铬上检查元素时，我注意到主图像的srcset属性也需要更新。我更新了该图片的srcset属性后，我尝试了它并且工作正常。

<img width="970" height="647" src="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg" class="hero-image wp-post-image" alt="Caption Test" data-smsrc="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-100x100.jpg" data-lgsrc="Array" srcset="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-300x200.jpg 300w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-1024x683.jpg 1024w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-750x500.jpg 750w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg 970w" sizes="(max-width: 970px) 100vw, 970px">

因此，在一个简单的句子，更新src和srcset两者。

来源

2016-02-04 04:34:48 Hemal

谢谢大家，一切都是正确的。 – Eckstein

您正在使用srcset，它用于不同宽度浏览器上的响应图像。你还需要更新，以及

来源

2016-02-04 04:36:16 Junaid

删除srcset和一切都会按预期工作。如果你希望在所有浏览器上工作，IE目前不支持它。请参阅http://caniuse.com/#feat=srcset

此外，预先加载图像以使您的页面更具响应性将是一个不错的主意。

来源

2016-02-04 04:37:59 Bunti

感谢您的提示。如今，我真的不太在乎IE，但是如果它成为主要的投诉，我可能会研究一下alt解决方案。预加载是一个好主意，谢谢。 – Eckstein

更改src属性不更新图像

回答

相关问题