从<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图像值

回答

相关问题