正文

vue2自定义指令实现在图片未完成加载前，用随机的背景色占位

譬如朝露 V管理员/ / 0 评论/ 1739阅读
03 21

在图片未完成加载前，用随机的背景色占位，图片加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
	</head>
	<style>
		.box{
			width:100%;
			height: 800px;
		}
	</style>
	<body>
		<div id="app">
			{{title}}
			<div class="box" v-for="itmes in list"  v-img="itmes"></div>
		</div>
		<script type="text/javascript">
			Vue.directive('img',{
				inserted(el,binding){
					var color=Math.floor(Math.random()*1000000);
					el.style.backgroundColor='#'+color;
					var img=new Image();
					console.log(img)
					img.src=binding.value;
					img.onload=function(){
						el.style.backgroundImage='url('+binding.value+')';
						el.style.backgroundSize='100%';
					}
				}
			})
			new Vue({
				el:'#app',
				data:{
					title:'hello vue',
					list:[
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553113398052&di=dc0a59f4c48b646b229d95e23bc786dc&imgtype=0&src=http%3A%2F%2Fbbsfiles.vivo.com.cn%2Fvivobbs%2Fattachment%2Fforum%2F201704%2F29%2F121805j2tx242arau2n22a.jpg',
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553113398051&di=800013ee64909cb120bcfe2f83a953ba&imgtype=0&src=http%3A%2F%2Fstatic01.coloros.com%2Fbbs%2Fdata%2Fattachment%2Fforum%2F201711%2F29%2F200739gjrrtjspykthwtj0.jpg',
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553113448364&di=8aa339a0aab02d57ffe058f90cb31168&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20180928%2F20180928105856_f14d72a3f48e996e51783dee973146a9_7.jpeg'
					]
				}
			})
		</script>
	</body>
</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。