更改src属性不会更新图像

时间:2016-02-04 04:19:18

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

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

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

nextLgSrc成功返回将替换当前图像的图像的绝对URL。事实上,当点击缩略图时,img元素的src会发生变化,但图像不再发生变化。第一个(默认)图像保持卡住状态,即使src属性正在其下方发生变化。

谁能告诉我可能发生的事情以及如何解决?

以下是完整图库代码的链接,如果有帮助,请在上下文中查看:[{3}}

实际上,这是指向无效网页的链接:http://pastebin.com/mae8YQi2

3 个答案:

答案 0 :(得分:4)

当您点击第一张图片以外的图片时

您只是更新src的{​​{1}}属性。

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

此外,最好预先加载图片以使页面更具响应性。