如何创建一个函数来根据需要加载图像

how do you create a function to load an image per demand

本文关键字：图像 加载 一个 何创建 创建 函数      更新时间：2023-09-26

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>

html:

<a class="profile" style="width: 100px;" id="web_login_p" href="#" data-chart="line" data-range="1m">heat map</a>

<div class="main" id="login" style="width:700px; height:300px;"></div>

每次点击加载图像的JavaScript：

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

当我点击web_loginp时，我得到heat_map_load未定义错误。你知道我在这里缺少什么吗？

heat_map_load未定义，因为它仅在本地作用域（即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();
    });
});

http://jsfiddle.net/mnTyG/

相关文章：