加载图片onclick事件

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

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

加载图片onclick事件

Loading image onclick event

html

javascript

jquery

events

jquery-events