从< a href>中找到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>
带有许多按钮.当单击该按钮时，它将与它链接的图形加载到一个名为"gallery"的div中.所有图像都被溢出到"gallery"中:隐藏，这就是为什么它们最初要加载的原因，该代码显示为:
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;
<div id="gallery">
<div>
<a name="pic1"></a><img alt="" src="../images/characters/character1.jpg" />
</div>
</div>
其中包含许多图像.我的脚本侦听鼠标单击，然后立即抓住 与其关联的href值(即"pic1")，然后使用该值查找与其链接的图像名称(即"character1.jpg")并将其存储在变量中. (我坚信这是我的问题所在).然后，针对"gallery" 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. (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). 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.
<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>
推荐答案
不确定我是否完全理解您的问题，但是我确实看到您的代码有问题.
Not sure if I fully understand your issue, but I do see an issue with your code.
您正在if块中定义var Imgsrc.如果表达式不正确，则不会定义Imgsrc.但是，在以后的代码中，无论条件如何，都可以使用它，而无需首先检查它是否已定义.
You are defining var Imgsrc within an if block. If the expression is not true, then Imgsrc will not be defined. 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>
有机会您可以发布您的html或更多详细信息，以便我们解决吗?
Any chance you can post your html or more detail so we can resolve this?
这篇关于从< a href>中找到src图片值.标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
