图片加载完成再显示图片

技能 · 2022-02-17 · 474 人浏览
图片加载完成再显示图片

核心只需要三行代码。
在图片加载的时候,可以渲染一个加载动画提高用户体验,在图片加载完成后关闭加载动画打开图片显示。
增加这个功能并不会浪费多长时间,但能够很大的提升用户体验,让用户知晓这里有张图片正在加载。

    var img = new Image();
    // url为图片地址
    img.src = url;
    img.onload = res => {
        // 加载完成,让图片显示
    }

image相关事件:onabort、onerror、onload

JavaScript JS
Theme Jasmine by Kent Liao