Merge pull request #1597 from hawtim/feature/support-image-lazy-loading

feat: add img tag with loading attribute for lazy loading

src/components/Cover.vue

@@ -16,7 +16,7 @@
           ><svg-icon icon-class="play" />
         </button>
       </div>
-      <img :src="imageUrl" :style="imageStyles" />
+      <img :src="imageUrl" :style="imageStyles" loading="lazy" />
       <transition v-if="coverHover || alwaysShowShadow" name="fade">
         <div
           v-show="focus || alwaysShowShadow"

src/components/DailyTracksCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="daily-recommend-card" @click="goToDailyTracks">
-    <img :src="coverUrl" />
+    <img :src="coverUrl" loading="lazy" />
     <div class="container">
       <div class="title-box">
         <div class="title">

src/components/FMCard.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="fm" :style="{ background }" data-theme="dark">
-    <img :src="nextTrackCover" style="display: none" />
+    <img :src="nextTrackCover" style="display: none" loading="lazy" />
     <img
       class="cover"
       :src="track.album && track.album.picUrl | resizeImage(512)"
+      loading="lazy"
       @click="goToAlbum"
     />
     <div class="right-part">

src/components/ModalAddTrackToPlaylist.vue

@@ -17,7 +17,7 @@
         class="playlist"
         @click="addTrackToPlaylist(playlist.id)"
       >
-        <img :src="playlist.coverImgUrl | resizeImage(224)" />
+        <img :src="playlist.coverImgUrl | resizeImage(224)" loading="lazy" />
         <div class="info">
           <div class="title">{{ playlist.name }}</div>
           <div class="track-count">{{ playlist.trackCount }} 首</div>

src/components/MvRow.vue

@@ -7,7 +7,7 @@
         @mouseleave="hoverVideoID = 0"
         @click="goToMv(getID(mv))"
       >
-        <img :src="getUrl(mv)" />
+        <img :src="getUrl(mv)" loading="lazy" />
         <transition name="fade">
           <div
             v-show="hoverVideoID === getID(mv)"

src/components/Navbar.vue

@@ -43,7 +43,12 @@
             </div>
           </div>
         </div>
-        <img class="avatar" :src="avatarUrl" @click="showUserProfileMenu" />
+        <img
+          class="avatar"
+          :src="avatarUrl"
+          @click="showUserProfileMenu"
+          loading="lazy"
+        />
       </div>
     </nav>
 

src/components/Player.vue

@@ -27,6 +27,7 @@
         <div class="container" @click.stop>
           <img
             :src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
+            loading="lazy"
             @click="goToAlbum"
           />
           <div class="track-info" :title="audioSource">

src/components/TrackList.vue

@@ -2,7 +2,10 @@
   <div class="track-list">
     <ContextMenu ref="menu">
       <div v-show="type !== 'cloudDisk'" class="item-info">
-        <img :src="rightClickedTrackComputed.al.picUrl | resizeImage(224)" />
+        <img
+          :src="rightClickedTrackComputed.al.picUrl | resizeImage(224)"
+          loading="lazy"
+        />
         <div class="info">
           <div class="title">{{ rightClickedTrackComputed.name }}</div>
           <div class="subtitle">{{ rightClickedTrackComputed.ar[0].name }}</div>

src/components/TrackListItem.vue

@@ -10,6 +10,7 @@
     <img
       v-if="!isAlbum"
       :src="imgUrl"
+      loading="lazy"
       :class="{ hover: focus }"
       @click="goToAlbum"
     />

src/views/artist.vue

@@ -2,7 +2,7 @@
   <div v-show="show" class="artist-page">
     <div class="artist-info">
       <div class="head">
-        <img :src="artist.img1v1Url | resizeImage(1024)" />
+        <img :src="artist.img1v1Url | resizeImage(1024)" loading="lazy" />
       </div>
       <div>
         <div class="name">{{ artist.name }}</div>
@@ -75,7 +75,7 @@
             @mouseleave="mvHover = false"
             @click="goToMv(latestMV.id)"
           >
-            <img :src="latestMV.coverUrl" />
+            <img :src="latestMV.coverUrl" loading="lazy" />
             <transition name="fade">
               <div
                 v-show="mvHover"
@@ -127,7 +127,7 @@
     <div v-if="mvs.length !== 0" id="mvs" class="mvs">
       <div class="section-title"
         >MVs
-        <router-link v-show="hasMoreMV" :to="`/artist/${this.artist.id}/mv`">{{
+        <router-link v-show="hasMoreMV" :to="`/artist/${artist.id}/mv`">{{
           $t('home.seeMore')
         }}</router-link>
       </div>

src/views/artistMV.vue

@@ -1,9 +1,11 @@
 <template>
   <div v-show="show">
     <h1>
-      <img class="avatar" :src="artist.img1v1Url | resizeImage(1024)" />{{
-        artist.name
-      }}'s Music Videos
+      <img
+        class="avatar"
+        :src="artist.img1v1Url | resizeImage(1024)"
+        loading="lazy"
+      />{{ artist.name }}'s Music Videos
     </h1>
     <MvRow :mvs="mvs" subtitle="publishTime" />
     <div class="load-more">

src/views/library.vue

@@ -1,9 +1,11 @@
 <template>
   <div v-show="show" ref="library">
     <h1>
-      <img class="avatar" :src="data.user.avatarUrl | resizeImage" />{{
-        data.user.nickname
-      }}{{ $t('library.sLibrary') }}
+      <img
+        class="avatar"
+        :src="data.user.avatarUrl | resizeImage"
+        loading="lazy"
+      />{{ data.user.nickname }}{{ $t('library.sLibrary') }}
     </h1>
     <div class="section-one">
       <div class="liked-songs" @click="goToLikedSongsList">

src/views/loginAccount.vue

@@ -69,7 +69,7 @@
 
         <div v-show="mode == 'qrCode'">
           <div v-show="qrCodeSvg" class="qr-code-container">
-            <img :src="qrCodeSvg" />
+            <img :src="qrCodeSvg" loading="lazy" />
           </div>
           <div class="qr-code-info">
             {{ qrCodeInformation }}

src/views/loginUsername.vue

@@ -31,7 +31,11 @@
             :class="{ active: user.nickname === activeUser.nickname }"
             @click="activeUser = user"
           >
-            <img class="head" :src="user.avatarUrl | resizeImage" />
+            <img
+              class="head"
+              :src="user.avatarUrl | resizeImage"
+              loading="lazy"
+            />
             <div class="nickname">
               {{ user.nickname }}
             </div>

src/views/lyrics.vue

@@ -34,7 +34,7 @@
         <div>
           <div class="cover">
             <div class="cover-container">
-              <img :src="imageUrl" />
+              <img :src="imageUrl" loading="lazy" />
               <div
                 class="shadow"
                 :style="{ backgroundImage: `url(${imageUrl})` }"

src/views/playlist.vue

@@ -139,9 +139,12 @@
 
     <div v-if="isLikeSongsPage" class="user-info">
       <h1>
-        <img class="avatar" :src="data.user.avatarUrl | resizeImage" />{{
-          data.user.nickname
-        }}{{ $t('library.sLikedSongs') }}
+        <img
+          class="avatar"
+          :src="data.user.avatarUrl | resizeImage"
+          loading="lazy"
+        />
+        {{ data.user.nickname }}{{ $t('library.sLikedSongs') }}
       </h1>
       <div class="search-box-likepage" @click="searchInPlaylist()">
         <div class="container" :class="{ active: inputFocus }">