更改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屬性不更新圖像

回答

相關問題