解決在vue中切換圖片,gif格式的圖片停在最後一幀的問題
阿新 • • 發佈:2022-05-05
應用場景:
頁面剛載入時,顯示的是png格式的圖示,當滑鼠放上去的時候,切換成為gif的動圖,一般我們會想到使用hover進行切換圖示,但是這樣就會導致gif會直接展示最後一幀,因為gif已經被瀏覽器載入進記憶體了,再次讀取的時候,會直接從記憶體讀取。所以我們可以在圖片的後邊加上時間戳或者隨機數,然後使用@mouseenter和@mouseleave事件進行控制滑鼠移動到圖示和離開圖示的操作
<div class = "img-div"> <!-- :src = "`${rxImg + '?+=' +new Date().getTime()}`" (加時間戳)--> <img class="img-rw" :src = "`${rxImg + '?tempid=' +Math.random()}`" @mouseenter="rxGif()" @mouseleave="rxPng()" /> </div> <script> export default{ data(){ return{ rwImg: require("@/assets/img/test.png") } }, methods:{ rxGif(){ this.rwImg = require("@/assets/img/test.gif") } , rxPng(){ this.rwImg = require("@/assets/img/test.png") } } } </script>