这次给大家带来图片加载完毕前显示加载圈的效果,图片加载完毕前显示加载圈的注意事项有哪些,下面就是实战案例,一起来看一下。
如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <template>
<img :src= "url" >
</template>
<script>
export default {
props: [ 'src' ],
data() {
return {
url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif
}
},
mounted() {
var newImg = new Image()
newImg.src = this.src
newImg.onerror = () => {
newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'
}
newImg.onload = () => {
this.url = newImg.src
}
}
}
</script>
|
Salin selepas log masuk
以下为纯js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>loading</title>
</head>
<body>
<img id= "img" >
<script>
window.onload = () => {
var img = document.querySelector( '#img' );
img.src = 'http://www.86y.org/images/loading.gif' ; // 先加载loading.gif
var newImg = new Image();
newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3' ;
newImg.onerror = () => {
newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg' ;
}
newImg.onload = () => {
img.src = newImg.src
}
}
</script>
</body>
</html>
|
Salin selepas log masuk
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
datepicker插件监听输入框
小程序使用.getImageInfo()获取图片信息
Atas ialah kandungan terperinci 图片加载完毕前显示加载圈的效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!