Question

如何在onclick事件的网页上加载图像而不重新加载整个页面？
这是我的代码



        <style type="text/css">
            div{
                border:1px solid red;
                margin-left: 12%;
                width: 20%;
                height: 200px;
                display: inline-block;
            }   
        </style>
        <script type="text/javascript">
            function changepic () {

            }
        </script>
        <html>
          <body>
             <div onclick="changepic">
             </div>
             <div onclick="changepic">
             </div>
          </body>
        </html>

当客户端点击其中一个div元素时，我想将图像放在div中。

Answer 1

使用requireJS可以轻松完成。将AMD定义为页面加载器，然后在按钮上单击调用该模块，该模块将根据需要注入图像html。

查看这篇文章 Lazy Loading of images

Answer 2

试试这个

function changepic(div) {
	document.getElementById(div).src = "https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png";
}

div{
  border:1px solid red;
  margin-left: 12%;
  width: 20%;
  height: 200px;
  display: inline-block;
}

<div onclick="changepic('div1')">
  <img id="div1" />
</div>
<div onclick="changepic('div2')">
  <img id="div2" />
</div>

Answer 3

如果需要，可以使用jQuery在data-img参数中传递图像。所以你可以在不同的div中传递不同的图像。

HTML

$(document).scroll(function() {
  var array = ["1", "2", "3", "4"];
  var currentArray = 0;

  function changeColor() {
    currentArray++;
    if(currentArray > 139) {
      currentArray = 0;
    }
  }

  for (var i = 0; i < 1; i++) {
    console.log(array[currentArray]);
  }
});

的jQuery

<div class="change" data-img="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg" />
</div>

JSFiddle示例：https://jsfiddle.net/zwf5k3qw/

正在加载图片onclick事件

3 个答案: