从<a href>标签中</a>找到src图片值
[英]Find a src image value from an <a href> tag
问题描述
I've been building an image gallery with pictures in the hundreds and I don't want them all to load on page load for obvious bandwidth issues. 
我一直在建立包含数百张图片的图片库，但我不希望所有图片都因页面加载而出现明显的带宽问题。 For starters, I put; 首先，我把；
<body onload="removeAttr("src")">
to prevent the pictures from loading which works... too well I'm afraid as it doesn't load my website header banner pic. 为了防止图片无法正常工作...我担心，因为它无法加载我的网站标题横幅图片。 Anyhow, my gallery is set up with a menu with each button representing a different image. 无论如何，我的画廊都设有一个菜单，每个按钮代表一个不同的图像。 The menu is displayed in this format; 菜单以这种格式显示。
<ul id="menu">
<li><a href="#pic1">Title</a></li>
</ul>
with many buttons. 有很多按钮。 When that button is clicked it loads the graphic linked with it into a div called "gallery" All the images are loaded into the "gallery" with overflow: hidden which is why they want to load initially, that code appears as; 当单击该按钮时，它将与它链接的图形加载到一个名为“ gallery”的div中。所有图像均以溢出的方式加载到“ gallery”中：隐藏，这就是为什么它们最初要加载的原因，代码显示为
<div id="gallery">
<div>
<a name="pic1"></a><img alt="" src="../images/characters/character1.jpg" />
</div>
</div>
Again with many images in it. 再次有很多图像。 My script listens for a mouse click and immediately grabs the a href value associated with it, so "pic1", then it uses that to find the image name linked with it so "character1.jpg" and stores it in a variable. 我的脚本侦听鼠标单击，并立即获取与其关联的href值，即“ pic1”，然后使用它来查找与其链接的图像名称，即“ character1.jpg”并将其存储在变量中。 (Which I firmly believe is where my problem lies). （我坚信这是我的问题所在）。 It then, targeting the "gallery" div deletes any picture previously in there then inserts the new image (the one stored in a variable). 然后，针对“ gallery” div删除先前在其中的任何图片，然后插入新图像（存储在变量中的图像）。 All this is in an attempt to load only the graphic the user wants to see not all of them. 所有这些都是为了仅加载用户希望查看的图形而并非全部。 That alert displays the button number so that part works, and I know it deletes the image loaded in the div as it seems to be loading the first image in the list which then vanishes upon testing, but then it never replaces it with a new one. 该警报显示按钮编号，以便该部件起作用，并且我知道它删除了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>
3 个解决方案
解决方案1
0 2017-10-13 04:06:18
Can you post the full source on a GitHub gist or a pastebin? 您可以将完整源代码发布到GitHub要点或pastebin吗？
Here's a simpler way to do it. 这是一种更简单的方法。 You don't need to add and remove new image elements, just change the src attribute on an existing one. 您无需添加和删除新的图像元素，只需更改现有图像元素的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>
解决方案2
0 已采纳 2017-10-13 04:46:17
Not sure if I fully understand your issue, but I do see an issue with your code. 不知道我是否完全理解您的问题，但是我确实看到您的代码有问题。
You are defining var Imgsrc within an if block. 您正在if块中定义var Imgsrc 。 If the expression is not true, then Imgsrc will not be defined. 如果表达式不正确，则不会定义Imgsrc 。 Yet later in your code you use it, regardless of conditions, without checking if it's defined in the first place. 但是在以后的代码中，无论条件如何，都可以使用它，而无需首先检查它是否已定义。
See my code comments below. 请参阅下面的代码注释。
<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>
Any chance you can post your html or more detail so we can resolve this? 您有机会发布您的html或更多详细信息，以便我们解决此问题吗？
解决方案3
0 2017-10-13 05:00:47
I would propose a revised set of markup and code. 我将提出一套修订的标记和代码。 Since you appear to have jQuery in your code, I will use that. 由于您的代码中似乎包含jQuery，因此我将使用它。
Menu of images: 图像菜单：
<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>
One place to show them: 向他们展示的地方：
<div id="gallery">
<img alt="" src="" />
</div>
Code to show them: 代码显示给他们：
$('#menu').on('click','.image-link',function(){
$('#gallery').find('img').attr('src', $(this).data('image'));
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.