页面占位图

比眉伴天荒 2022-05-14 15:09 229阅读 0赞

1、为什么需要使用占位图？

1.1让用户感知此处正在加载一张图片，优化体验。

1.2实现文档更快的加载，js相应的更快。

1.3预占位，当图片加载完成后不改变文档结构布局（需要预占位图片与真实图片大小一致）。

2、

依据onload事件判断图片是否加载完成，然后显隐占位图。

<div v-for="(activeItem, activeIndex) in activityList" :key="activeIndex" class="activity-wrap">
    	<div class="img-wrap">
    		<img 
    			:src="imgUrl + activeItem.Banner + '_0x0'" 
    			:alt="activeItem.ActivityName" 
    			@load="activityLoad (activeItem.Banner, activeIndex)" 
    			v-show="loadingImges[activeIndex]"
    		>
    		<img 
    			:src="loadingImgSrc"
    			v-show="!loadingImges[activeIndex]"
    		>
    	</div>
    </div>

const loadingimg = require('../assets/images/category/activity-placeholder.png')
    
    data () {
    	return {
            loadingImges: {},
    		loadingImgSrc: loadingimg,
        }
    }
    methods: {
        activityLoad (imgId, imgIndex) {
    		if (imgId) {
    			this.loadingImges[imgIndex] = true;
    		}
    	},
    }

3、判断图片加载完成的方法

[https://blog.csdn.net/zhuchunyan\_aijia/article/details/52016962][https_blog.csdn.net_zhuchunyan_aijia_article_details_52016962]

[https_blog.csdn.net_zhuchunyan_aijia_article_details_52016962]: https://blog.csdn.net/zhuchunyan_aijia/article/details/52016962

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关页面加载占位_设计细节之中后台页面加载

中后台的产品常有大量数据需要载入的情况，会导致整体页面加载缓慢，页面有较长时间停留于空白状态，用户也容易因这种长时间的空白状态而焦虑不安(尤其是演示、工作急需之时)。为了解

曾经终败给现在/ 2023年01月07日 05:58/ 0 赞/ 247 阅读

相关中文占位符

&\32; => 普通的英文半角空格 &\160; =>   => &\xA0; => no-break space （普通的英文半角空格但不换行） &

ゝ一纸荒年。/ 2022年10月25日 01:20/ 0 赞/ 410 阅读

相关 css占位符

== 普通的英文半角空格 == == == no-break space （普通的英文半角空格但不换行）　 ==

红太狼/ 2022年10月09日 00:49/ 0 赞/ 487 阅读

相关巧用占位图开发

巧妇难为无米之炊，对于我们前端开发没有设计稿没有图片去搞什么页面啊用用占位图吧：[http://via.placeholder.com/350x150][http_via.

矫情吗；*/ 2022年05月28日 02:09/ 0 赞/ 190 阅读

相关 css占位符

&\32; == 普通的英文半角空格 &\160; ==   == &\xA0; == no-break space （普通的英文半角空格但不换行） &\1228

喜欢ヅ旅行/ 2022年05月24日 08:38/ 0 赞/ 431 阅读

相关页面占位图

1、为什么需要使用占位图？ 1.1让用户感知此处正在加载一张图片，优化体验。 1.2实现文档更快的加载，js相应的更快。 1.3预占位，当图片加载完成后不改变文档结构布局

比眉伴天荒/ 2022年05月14日 15:09/ 0 赞/ 230 阅读

相关 MyBatis占位符

MyBatis \\{value\} 使用\\{\}意味着使用的预编译的语句，即在使用jdbc时的preparedStatement，sql语句中如果存在参数则会使用?

谁践踏了优雅/ 2022年04月21日 15:50/ 0 赞/ 357 阅读

相关占位

该文件操作还是函数了,忘了个球的了!!! 啥都木有,以后慢慢补吧.济南真他大爷的热!热死个熊!医院消毒水味真tm难闻!!!什么时候是个头唉!!! 转载于:https://ww

向右看齐/ 2022年01月12日 08:57/ 0 赞/ 221 阅读

相关抓包占位。。

[https://www.cnblogs.com/yyhh/p/5140852.html\l02][https_www.cnblogs.com_yyhh_p_5140852.h

傷城~/ 2021年12月11日 11:21/ 0 赞/ 287 阅读

相关 java占位符

一、format 　　1、`public static String format(String format, Object... args)` 　　使用本地语言环境

曾经终败给现在/ 2021年11月11日 02:06/ 0 赞/ 512 阅读