加载图片onclick事件

Question

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

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

            }
        </script>
        &lthtml>
          &ltbody>
             &ltdiv onclick="changepic">
             </div>
             &ltdiv onclick="changepic">
             </div>
          </body>
        </html>
    

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

Answer 1

使用requireJS可以很容易地做到这一点。 将AMD定义为页面加载器，然后在按钮上单击调用该模块，该模块将根据需要注入图像html。

检查这篇文章延迟加载图像

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在image-img参数中传递图像。 因此，您可以在不同的div中传递不同的图像。

HTML

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

jQuery的

$('.change').click(function(){
    var img=$(this).data('img');
    $(this).children('img').attr('src', img);
});

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