檢測img src，然后使用javascript進行更改

Question

這是我的代碼：

var i;
var pic = document.getElementById('image');
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;

document.getElementById('next').onmousedown = function () {
    i = 0;
            // it works up to here
    pic.addEventListener("DOMAttrModified", function(event) {
        if (i == 0 && event.attrName == "src") {
        pic = document.getElementById('image');
        i = 1;   // this is to prevent endless loop
        picSrc = pic.src;
        fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
        pic.src = fullSrc;
        }
});
return true;
};

它應該適用於imgur的水平布局相冊，並用全分辨率的圖像替換低分辨率的圖像，一次只顯示一張圖像（當前顯示的圖像）。 單擊“下一步”按鈕后，將顯示一個新圖像。 但是，該腳本不會加載下一個全分辨率圖像。 它僅適用於加載的第一個圖像。

Answer 1

您正在完全弄亂范圍，第一次運行后會使整個代碼無效。 這也應該在控制台中彈出足夠多的錯誤。 重新分配分配到正確的位置：

document.getElementById('next').onmousedown = function () {
    var i;
    var pic = document.getElementById('image');
    var picSrc = pic.src;
    var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
    pic.src = fullSrc;
    pic.addEventListener("DOMAttrModified", function(event) {
        if (i == 0 && event.attrName == "src") {
        pic = document.getElementById('image');
        i = 1;   // this is to prevent endless loop
        picSrc = pic.src;
        fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
        pic.src = fullSrc;
        }
});
return true;
};

根據頁面的具體工作方式（如果沒有真實的用例，我將無法看到），您可能還必須重新分配整個mousedown事件。

Answer 2

每次mousedown您都將添加一個新的DOMAttrModified事件偵聽器。

嘗試將您的代碼安排如下：

var pic = document.getElementById('image');
var i;

pic.addEventListener("DOMAttrModified", function(event) {
        if (i == 0 && event.attrName == "src") {
        //pic = document.getElementById('image');
        i = 1;   // this is to prevent endless loop
        picSrc = pic.src;
        fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
        pic.src = fullSrc;
        i = 0;
    });

document.getElementById('next').onmousedown = function () {
    var picSrc = pic.src;
    var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
    pic.src = fullSrc;
});

您還應該嘗試使用addEventListener代替onmousedown