jquery - 单击图像以在 jquery 中加载另一个图像

Question

我有一个使用 jquery 显示的图像。当鼠标悬停在该图像上时，我喜欢将鼠标更改为可单击，单击时，我喜欢加载另一个图像。这是我的代码，不工作。有任何想法吗？

html代码：

jQuery代码：

$("#div1").click(function () {
    var img_cpu = "http://192.168.101.1/cpu.png";
    var myImage = new Image();
    $(myImage).load(function () {
        $("#div2").html(myImage)    
    }).error(function () {
        $('#div2').hide();
    })
    .attr('src', img_cpu)
});

Answer 1

发生了一些问题

• 您创建了一个新图像var myImage = new Image(); ，但您没有指定src稍后（因此加载事件永远不会触发）

• myImage32未在您的代码中的任何地方定义

此外，请确保cpu.png

• 在同一个文件夹中
• 644具有查看的最低权限 ( )
• 尚未缓存，否则永远不会发生加载事件：在这种情况下，您应该检查complete属性并触发为加载事件定义的处理程序（请参见下面的代码段）

---

 $(myImage).one('load', function () {   /* use one() */
     $("#div2").html(myImage32)    
 })
 .attr('src', img_cpu);

 if (!!myImage.complete) $(myImage).trigger('load');

Answer 2

马上，您似乎忘记将图像的 URL 放入加载函数中。它应该看起来像.load('url/to/image/', function() ...