從<a href>標籤中查找src圖像值

我一直在用數百個圖片構建一個圖片庫，我不希望它們都在頁面加載時加載明顯的帶寬問題。對於初學者，我說;從<a href>標籤中查找src圖像值

<body onload="removeAttr("src")">

防止圖片加載哪些作品...太好我害怕，因爲它不會加載我的網站標題橫幅圖片。無論如何，我的畫廊設置了一個菜單，每個按鈕代表不同的圖像。菜單以這種格式顯示;

<ul id="menu"> 
    <li><a href="#pic1">Title</a></li> 
</ul>

與許多按鈕。點擊該按鈕後，它會將與其鏈接的圖形加載到名爲「gallery」的div中。所有圖像都會被加載到「gallery」中，並帶有overflow：hidden，這就是爲什麼他們想要初始加載，代碼顯示爲;

<div id="gallery"> 
    <div> 
     <a name="pic1"></a><img alt="" src="../images/characters/character1.jpg" /> 
    </div> 
</div>

再次帶有許多圖像。我的腳本聽取鼠標點擊並立即獲取與其相關聯的href值，因此「pic1」，然後它使用它來查找與其鏈接的圖像名稱，以便「character1.jpg」並將其存儲在變量中。（我堅信我的問題在哪裏）。然後，針對「圖庫」div刪除之前在那裏的任何圖片，然後插入新圖像（存儲在變量中的圖像）。所有這些都是爲了只加載用戶想要看到的圖形，而不是全部。該警報顯示按鈕編號，以便部分工作，並且我知道它會刪除加載在div中的圖像，因爲它似乎正在加載列表中的第一個圖像，然後在測試中消失，但是它不會用新的圖像替換它。

<script type="text/javascript"> 

window.onclick = function(e) { 
    var node = e.target; 
    while (node != undefined && node.localName != 'a') { 
    node = node.parentNode; 
    } 
    if (node != undefined) { 

    if (this.id == 'alternate-image') { 
     var Imgsrc = $(this).find('img').attr('src'); 
     alert(src); 
    } 

    var dv = document.getElementById('gallery'); 
    // remove all child nodes 
    while (dv.hasChildNodes()) { 
     dv.removeChild(dv.lastChild); 
    } 
    alert("The button value is: " + node); 

    var img = document.createElement("IMG"); 
    img.src = Imgsrc; 
    dv.appendChild(img); 

    return false; // stop handling the click 
    } else { 
    alert('This is not a link: ' + e.target.innerHTML) 
    return true; // handle other clicks 
    } 
} 
</script>

來源

2017-10-13 Black_Lightning

你提高你的編程技能或努力實現項目？請參閱[這裏]（https://github.com/sachinchoolur/lightgallery.js/）瞭解照片庫示例項目。 –

如何嘗試使用** var Imgsrc = $（this）.find（'img'）[0] .attr（'src'）; ** –

不知道我是否完全理解您的問題，但確實發現您的代碼存在問題。

您正在定義if塊內的var Imgsrc。如果表達式不正確，則不會定義Imgsrc。然而，在後面的代碼中，不管條件如何，都可以使用它，而不必檢查它是否被首先定義。

看到我下面的代碼註釋。

<script type="text/javascript"> 

window.onclick = function(e) { 
    var node = e.target; 
    while (node != undefined && node.localName != 'a') { 
    node = node.parentNode; 
    } 
    if (node != undefined) { 

    if (this.id == 'alternate-image') { 
     var Imgsrc = $(this).find('img').attr('src'); //<!---- here you define the Imgsrc var 
     //but what if the this.id != 'alternate-image'?? 
     alert(src); 
    } 

    var dv = document.getElementById('gallery'); 
    // remove all child nodes 
    while (dv.hasChildNodes()) { 
     dv.removeChild(dv.lastChild); 
    } 
    alert("The button value is: " + node); 

    var img = document.createElement("IMG"); 
    img.src = Imgsrc; //<!---- need to check if this is defined. 
    dv.appendChild(img); 

    return false; // stop handling the click 
    } else { 
    alert('This is not a link: ' + e.target.innerHTML) 
    return true; // handle other clicks 
    } 
} 
</script>

任何機會，你可以發佈你的HTML或更多的細節，所以我們可以解決這個問題？

來源

2017-10-13 04:46:17 JanR

我必須感謝你，在隔離之後，如果聲明問題，（我刪除'if'聲明並離開; 'var Imgsrc = $（this）.find（'img'）。attr（'src'）; alert（src）;'作爲一個聲明，它正在加載圖像很好，雖然我的代碼不像其他海報那樣優雅，至少它是有效的，我不能夠感謝你。有時候新鮮的眼睛讓所有的不同！ –

最後一件事，因爲通過事情的聲音，我會在Jan的改進中使用我的原始代碼，還有最後一個刺。是否有可能使用' removeAttr（「src」）「>'作爲例外，因爲它也阻止我的網站的頁眉圖像加載？ –

你可以在GitHub的gist或pastebin上發佈完整的源代碼嗎？

這是一個更簡單的方法。您不需要添加和刪除新的圖像元素，只需更改現有屬性的src屬性即可。

<ul class='imageMenu'> 
    <li data-image="dog.jpg">dog</li> 
    <li data-image="cat.jpg">cat</li> 
    <li data-image="donkey.jpg">donkey</li> 
</ul> 
<img src="" id='selectedImage' /> 
<script> 
    const img = document.querySelector('#selectedImage'); 
    document.querySelectorAll('.imageMenu li').forEach(item => { 
    item.addEventListener('click', evt => { 
     img.setAttribute('src', evt.target.getAttribute('data-image')); 
    }); 
    }); 
</script>

來源

2017-10-13 04:06:18

首先，謝謝瑞安回覆如此之快，我必須道歉，我我只是慢慢地迴應，因爲我試圖理解代碼（這讓您瞭解我的侷限性）。從我有限的知識中，它看起來像是在列表中的值，並在整個列表中應用一個監聽器（對於按鈕點擊，我假設），當單擊一個時，將dog.jpg值插入到名爲'selected Image'的圖像src中，我對嗎？對不起，我在學習。如果是這樣，那麼我是否會在插入到圖庫div中的腳本中使用id'selected Image'作爲變量？ –

...等待它是唯一一個始終保持加載在圖庫中的圖像！我想我明白了！哦，男孩，你們可能都會爲我的開支笑了起來......感覺自由。 –

哈哈，不用擔心。這個想法是，頁面上只有一個圖像元素，我們將其另存爲'img';而不是添加和刪除圖像來改變它們，你只需要'img'並改變它引用的URL，這會導致它重新加載它的新URL。 'querySelectorAll'獲取所有'li'元素的列表，併爲它們中的每一個添加一個單獨的監聽器。當任何'li'被點擊時，它將獲得'data-image'屬性，並且改變'img'的'src'指向那個。所以你所要做的就是確保每個'data-image'都有應該加載的文件名。 –

我會提出一套修訂的標記和代碼。由於你的代碼中似乎有jQuery，我將使用它。

圖像菜單：

<ul id="menu"> 
    <li class="image-link" data-image="../images/characters/character1.jpg">Title 1</li> 
    <li class="image-link" data-image="../images/characters/character2.jpg">Title 2</li> 
    <li class="image-link" data-image="../images/characters/character3.jpg">Title 3</li> 
</ul>

一個地方告訴他們：

<div id="gallery"> 
    <img alt="" src="" /> 
</div>

代碼來顯示他們：

$('#menu').on('click','.image-link',function(){ 
    $('#gallery').find('img').attr('src', $(this).data('image')); 
});

來源

2017-10-13 05:00:47

雖然我似乎無法得到任何工作，但這兩個想法看起來都很棒。我已經在megashare上傳了幾個版本，所以你可以看到代碼。如果你不想看到預期的效果，請訪問http://www.theamityblade.com/Characters.html。此版本通過css訪問圖像; http://megashare.megahd.com.br/2Wc。我不得不放棄它，因爲它在IE中不起作用，並不完美。無論如何，馬克提出的解決方案就是這個版本; http://megashare.megahd.com.br/2Wa和Ryan的是; http://megashare.megahd.com.br/2Wb我不知道我做錯了什麼。 –

你的鏈接HTML有一些挑戰 - 在那裏鏈接多個jQuery版本，你應該使用更新的副本。我在這裏創建了一個記錄所選圖像的小提琴 - 沒有圖像顯示，因爲我沒有任何圖像但你可以看到實際的工作代碼封裝在文檔中準備好了封閉https://jsfiddle.net/jvtmf794/ –

爲了什麼是值得的，我做了一個測試，將引用的網站作爲圖片引用文本的前綴，並且當您單擊圖片時它會顯示圖片。我不會發布該代碼，因爲它會引用該網站，我不希望這樣做未經許可即鏈接到圖像。 –

從<a href>標籤中查找src圖像值

回答

相關問題