更改 src 属性不会更新图像答案

【问题标题】：Changing src attribute doesn't update image更改 src 属性不会更新图像
【发布时间】：2016-02-04 04:19:17
【问题描述】：

作为图片库的一部分，当用户点击各种缩略图时，我正在使用以下代码来切换图片元素上的src 属性。自从我构建它以来，它的每个部分已经运行了大约 7 个月，但是在过去几周的某个时候，这部分代码停止了工作：

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

【问题讨论】：

快速检查您的主 img，单击下面的缩略图时 src 没有改变，这是正确的行为吗？如果没有，那么您需要修改您的点击处理程序逻辑
我从这个例子中得到的是，你不应该改变元素的src，但你应该滑动滑块到点击的元素。
您的链接显示 data-lgsrc="Array" ，这可能是问题所在。通过查看控制台 currentSrc 值没有改变
我已经从图像标签中删除了srcset 属性并且它正在工作。虽然反映新选择的图像需要 1 秒的时间。

标签： javascript jquery image-gallery custom-data-attribute

【解决方案1】：

因为当你点击第一个以外的图片时，

您只是在更新img 的src 属性。

在 chrome 上使用开发人员工具检查元素时，我注意到主图像的 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。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

另外，预加载图像以使您的页面更具响应性也是一个好主意。

【讨论】：

感谢您的提示。老实说，这些天我不太关心 IE，但如果它成为一个主要的投诉，我可能会考虑一个替代解决方案。预加载是个好主意，谢谢。