Question

在我的网页项目中，我有一个不同的html页面和_Layout页面。此布局页面显示用户的个人资料照片，如下所示：

 <img src="~/Path/avatar.png" id="avatar">

我实施了一件事：如果用户还没有上传个人资料照片，_Layout页面将始终显示标准avatar.png。否则，如果他上传了他们的头像，我会做下一个：

$.ajax({
        type: 'POST',
        url: '/Account/HasAvatar/',
        success:
            function (data) { //data - it's the name of the image file
                console.log(data);
                if (data == null)
                    return;
            $("#avatar").attr("src", window.location.protocol+"//"+window.location.host+"/Path/" + data);
        }
    })

如果当前用户已经上传了个人资料照片，控制器方法HasAvatar()将返回其名称，然后jquery将标准<img src="">更改为已存在的图像。但在这里我有一个问题。当用户加载任何页面时，首先他可以看到标准化身，然后（仅在0.2秒内）加载当前用户的图像。如何逃避这个双重图像加载？有什么想法吗？

Answer 1

检查图像是否存在于服务器端，并在将其发送到客户端之前替换src。

Answer 2

您可以使用css最初隐藏img，例如使用style="display:none;"然后在图片加载时，再次显示它：

$.ajax({
    type: 'POST',
    url: '/Account/HasAvatar/',
    success:
        function (data) { //data - it's the name of the image file
            console.log(data);
            if (data == null){
                $("#avatar").css('display', 'initial');
                return;
            }
            $("#avatar").one('load', function(){
                $("#avatar").css('display', 'initial');
            });
            $("#avatar").attr("src", window.location.protocol+"//"+window.location.host+"/Path/" + data);
        }
})

如何逃避双重图像加载？

2 个答案: