Question

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>

Answer 1

您可以在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>

Answer 2

不确定我是否完全理解您的问题，但我确实发现您的代码存在问题。

您正在var Imgsrc块中定义if。如果表达式不为真，则不会定义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或更多细节，以便我们解决此问题？

Answer 3

我建议修改一组标记和代码。由于您的代码中似乎有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'));
});

从<a href=""> tag

3 个答案: