Find a src image value from an 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;

 <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. (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>

回答1:

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 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>

Any chance you can post your html or more detail so we can resolve this?

回答2:

Can you post the full source on a GitHub gist or a 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.

<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>

回答3:

I would propose a revised set of markup and code. Since you appear to have jQuery in your code, I will use that.

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'));
});

来源：https://stackoverflow.com/questions/46722251/find-a-src-image-value-from-an-a-href-tag

标签

javascript

href

src

image-gallery

imagesource

Find a src image value from an <a href> tag

问题

回答1:

回答2:

回答3: