首頁 > 開發者 > JavaScript
vue實現圖片載入完成前的loading組件方法，
如下所示：
<template> <img :src="url"></template><script> export default { props: ['src'], // 父組件傳過來所需的url 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 = () => { // 圖片載入成功後把地址給原來的img this.url = newImg.src } } }</script>
以下為純js代碼
<!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 img.src = newImg.src } } </script></body></html>
以上這篇vue實現圖片載入完成前的loading組件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
