更改 src 属性不会更新图像

Changing src attribute doesn't update image

本文关键字：更新 图像 src 属性 更改      更新时间：2023-09-26

作为图像库的一部分，我使用以下代码在用户单击各种缩略图时切换图像元素上的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属性。

在 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两者。

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

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

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

相关文章：