ASP.NET MVC：加载时调用jQuery函数返回布尔值并控制图片显示问题

首先说最直接高效的方案——服务器端直接控制渲染，毕竟ASP.NET MVC是服务器端渲染框架，没必要绕到客户端再判断，既省了一次AJAX请求，也不会有图片加载后再隐藏的闪烁问题。

你可以直接在Razor视图里用@if判断控制器返回的布尔值，只有满足条件时才渲染图片标签：

<div class="imageHolder">
    @* 这里替换成你控制器返回的布尔值字段，比如Model.Users[i].IsAllowedShowIcon *@
    @if (Model.Users[i].IsAllowedShowIcon) {
        <img id="icon" data-userId="@Model.Users[i].Id" src="~/Images/your-icon-path.png" />
    }
</div>

如果因为某些原因必须用客户端jQuery来处理，那你原来的load事件没触发大概率是这几个原因：

1. 事件绑定时机不对——DOM还没加载完成就执行了绑定代码，导致找不到#icon元素
2. 图片被浏览器缓存了，已经加载完成后才绑定load事件，自然不会触发
3. 图片的src路径错误，加载失败，load事件不会执行

针对这些问题，给你调整后的客户端代码：

// 确保DOM完全加载后再绑定事件
$(document).ready(function() {
    var $icon = $('#icon');
    
    // 绑定load事件
    $icon.on('load', function() {
        var userId = $(this).data('userid');
        // 调用控制器方法获取布尔值
        $.ajax({
            url: '/YourController/YourCheckMethod', // 替换成你的控制器路由
            type: 'GET',
            data: { userId: userId },
            success: function(isShow) {
                // 根据返回值控制显示/隐藏
                $icon.toggle(isShow);
            },
            error: function() {
                // 请求失败时默认隐藏图片
                $icon.hide();
            }
        });
    });

    // 处理缓存情况：如果图片已经加载完成，手动触发load事件
    if ($icon[0].complete) {
        $icon.trigger('load');
    }

    // 额外处理图片加载失败的情况
    $icon.on('error', function() {
        $(this).hide();
    });
});

另外，建议一开始就把图片设为隐藏，避免用户看到不必要的加载过程：

<div class="imageHolder">
    <img id="icon" data-userId="@Model.Users[i].Id" src="~/Images/your-icon-path.png" style="display: none;" />
</div>

这样在AJAX请求返回后，再根据布尔值决定是否显示图片，体验会更好。

内容的提问来源于stack exchange，提问作者KeTa16