Question

我想在网页上显示一系列图片。

该网站是静态的，没有服务器端语言。

有没有办法让网站加载类似img1，img2，img3等类似的点击而不重新加载整个页面。

我是html和css的新手，但是如果有必要，我愿意阅读一些关于JavaScript的内容。

关键是要尽可能少地加载网站。所以其他任何提示都会非常感激。

如果我没有考虑任何其他网站优化，可以获得奖励。

Answer 1

您可以使用空的src属性在HTML中创建图像标记：

<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
<a href="#" id="but-1">Load image 1</a>
<a href="#" id="but-2">Load image 2</a>
<a href="#" id="but-3">Load image 3</a>

然后，通过JavaScript，您可以在每个链接上侦听点击事件，并填充每个图像的src：

document.getElementById('but-1').on("click", function(){
    document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
    document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on

这样，每次点击链接时，每个相应的图像都会加载。

Answer 2

虽然你有一个已接受的答案但是这里你正在寻找的是什么更换点击的DIV

<强> HTML

<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
    <img id="img1" src="">
</div>

<强>的jQuery

$( document ).ready(function() {
    var check=0;
    $('#btn1').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
      $("#img1").attr('src', 'url1');
   check++; 
  } else {
      if(check==0){
    $("#img1").attr('src', 'url2');
      }else{ $("#img1").attr('src', 'url3');}
  }
  $(this).data("clicks", !clicks);
});
});

正在使用 DEMO

重新加载特定的div

2 个答案: