fix: blog image lazyload

Naccl · Naccl · commit dbf7a0521c26 · 2024-11-17T14:35:03.000+08:00
diff --git a/blog-view/src/components/blog/BlogItem.vue b/blog-view/src/components/blog/BlogItem.vue
@@ -34,7 +34,7 @@
 						<i class="small folder open icon"></i><span class="m-text-500">{{ item.category.name }}</span>
 					</router-link>
 					<!--&#25991;&#31456;Markdown&#25551;&#36848;-->
-					<div class="typo m-padded-tb-small line-numbers match-braces rainbow-braces" v-html="item.description"></div>
+					<div class="typo m-padded-tb-small line-numbers match-braces rainbow-braces" v-lazy-container="{selector: 'img'}" v-viewer v-html="item.description"></div>
 					<!--&#38405;&#35835;&#20840;&#25991;&#25353;&#38062;-->
 					<div class="row m-padded-tb-small m-margin-top">
 						<a href="javascript:;" @click.prevent="toBlog(item)" class="color-btn">&#38405;&#35835;&#20840;&#25991;</a>
@@ -72,4 +72,4 @@
 
 <style scoped>
 
-</style>
+</style>
diff --git a/blog-view/src/components/blog/BlogList.vue b/blog-view/src/components/blog/BlogList.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<!--content-->
-		<BlogItem :blogList="blogList" v-viewer/>
+		<BlogItem :blogList="blogList"/>
 		<!--&#20998;&#39029;-->
 		<Pagination :getBlogList="getBlogList" :totalPage="totalPage"/>
 	</div>
@@ -33,4 +33,4 @@
 
 <style scoped>
 
-</style>
+</style>
diff --git a/blog-view/src/views/about/About.vue b/blog-view/src/views/about/About.vue
@@ -3,7 +3,7 @@
 		<div class="ui top attached segment m-padded-lr-big">
 			<h2 class="m-text-500" style="text-align: center">{{ about.title }}</h2>
 			<meting-js server="netease" type="song" :id="about.musicId" theme="#25CCF7" v-if="about.musicId!==''"></meting-js>
-			<div class="typo content m-margin-top-large" v-viewer v-html="about.content"></div>
+			<div class="typo content m-margin-top-large" v-lazy-container="{selector: 'img'}" v-viewer v-html="about.content"></div>
 		</div>
 		<!--&#35780;&#35770;-->
 		<div class="ui bottom teal attached segment threaded comments">
@@ -53,4 +53,4 @@
 	.content ul li {
 		letter-spacing: 1px !important;
 	}
-</style>
+</style>
diff --git a/blog-view/src/views/blog/Blog.vue b/blog-view/src/views/blog/Blog.vue
@@ -91,7 +91,6 @@
 	import CommentList from "@/components/comment/CommentList";
 	import {mapState} from "vuex";
 	import {SET_FOCUS_MODE, SET_IS_BLOG_RENDER_COMPLETE} from '@/store/mutations-types';
-	import {letsLazyload} from "@/util/lazyload";
 
 	export default {
 		name: "Blog",
diff --git a/blog-view/src/views/friends/Friends.vue b/blog-view/src/views/friends/Friends.vue
@@ -19,7 +19,7 @@
 		</div>
 		<!--&#39029;&#38754;&#25551;&#36848;-->
 		<div class="ui teal attached segment">
-			<div class="typo content" v-viewer v-html="info.content"></div>
+			<div class="typo content" v-lazy-container="{selector: 'img'}" v-viewer v-html="info.content"></div>
 		</div>
 		<!--&#35780;&#35770;-->
 		<div class="ui bottom teal attached segment threaded comments">
@@ -112,4 +112,4 @@
 		margin-top: 5px !important;
 		margin-bottom: 7px;
 	}
-</style>
+</style>
diff --git a/blog-view/src/views/moments/Moments.vue b/blog-view/src/views/moments/Moments.vue
@@ -14,7 +14,7 @@
 							<span style="font-weight: 700">{{ $store.state.introduction.name }}</span>
 							<span class="right floated">{{ moment.createTime | dateFromNow }}</span>
 						</div>
-						<div class="content typo" :class="{'privacy':!moment.published}" v-viewer v-html="moment.content"></div>
+						<div class="content typo" :class="{'privacy':!moment.published}" v-lazy-container="{selector: 'img'}" v-viewer v-html="moment.content"></div>
 						<div class="extra content">
 							<a class="left floated" @click="like(moment.id)">
 								<i class="heart icon" :class="isLike(moment.id)?'like-color':'outline'"></i>{{ moment.likes }}
@@ -209,4 +209,4 @@
 	.privacy {
 		background: repeating-linear-gradient(145deg, #f2f2f2, #f2f2f2 15px, #fff 0, #fff 30px) !important;
 	}
-</style>
+</style>
