Javascript 如何创建一个函数来按需加载图像

获取和加载图像的JavaScript：

<script>

function heat_map_load() {
    var heat_map="http://example.com/login.png";
    $(document).ready(function(){

        var myImage = new Image();
        $(myImage).load(function () {

            $('#login img').css({ "width": "auto", "height": "auto" });

        }).error(function () {
            $('#login').hide();
        }).attr('src', heat_map)
    });
}
</script>

---

当我单击web\u login\p时，我得到了heat\u map\u load not defined错误。你知道我这里缺少什么吗？

热映射加载未定义，因为它仅在本地范围内可见，即
document.ready
处理程序。
Benjamin是对的，您应该在
.ready
中移动单击处理程序。下面是一个工作示例：

$(document).ready(function(){
    var heat_map = "http://www.google.com/images/srpr/logo11w.png";
    function heat_map_load() {

        var myImage = new Image();
        $('#login').append($(myImage));
        $(myImage).load(function () {

            $('#login img').css({ "width": "auto", "height": "auto" });


        }).error(function () {
            $('#login').hide();
        }).attr('src', heat_map);

    }
    $("#web_login_p").click(function() {
        heat_map_load();
    });
});

您应该在文档就绪句柄外部定义
heat\u map\u load
方法将heat\u map\u load函数移到
$（文档）外部。ready
不要将其移到
外部。ready
将单击句柄移入。此外，请使用一致的命名方案（在本例中，请使用heatMapLoaded）。或者更好——首先不要使用.ready，并将代码放在正文的末尾。未定义意味着javascript在调用时无法获取函数。当函数定义不在调用之前时，可能会发生这种情况。检查函数脚本是否在以后的javascript之前加载。@Satpal我已经提出了您的建议，没有区别。我无法每次单击加载图像。我确实有一个附加。如果login div中已经存在某个内容，则会附加到该内容。我需要用图像替换登录div中的任何内容。我可以用什么来代替append？例如，
$（'#login'）.html（$（myImage））
$("#web_login_p").click(function() {
    heat_map_load();
});

$(document).ready(function(){
    var heat_map = "http://www.google.com/images/srpr/logo11w.png";
    function heat_map_load() {

        var myImage = new Image();
        $('#login').append($(myImage));
        $(myImage).load(function () {

            $('#login img').css({ "width": "auto", "height": "auto" });


        }).error(function () {
            $('#login').hide();
        }).attr('src', heat_map);

    }
    $("#web_login_p").click(function() {
        heat_map_load();
    });
});