Implement a vue single page scrolling lazy loading plugin
HBuilderX for development tools
1. Introduce the component first or an error will be reported
Add v-lazy-container = "{ selector: 'img' }" to the tag
Subsequent modification of a problem (lazy loading failure) plus this css:
Before adding:
After adding it, implement scrolling loading: 
Implement scrollable loading of renderings:
Implement lazy loading scrolling effect
The complete code is as follows:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover" />
<script src="http://f.zsbab.com/f/610066/file/js/vue.js"></script>
<!-- 引入vue-lazyload懒加载组件 -->
<script src="https://unpkg.com/[email protected]/vue-lazyload.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
img {
display: block;
/*由于源数据没有高度，导致懒加载无效,添加最小高度进行占位*/
min-height: 300px;
}
/*在加载完成时取消最小高度,避免拉伸*/
img[ lazy=loaded] {
min-height: auto;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- <div v-html="dataInfo.dusmi_id"></div> -->
<div style="letter-spacing: 2px;">{
{dataInfo.dusmi_title}}</div>
<div style="font-size: 12px;">{
{dataInfo.date}} {
{dataInfo.time}}</div>
<!-- <div>{
{dataInfo.dusmi_desc}}</div> -->
<div v-html="dataInfo.dusmi_content" v-lazy-container="{ selector: 'img'}"></div>
</div>
<script type="text/javascript" src="./data.json"></script>
<script type="text/javascript">
'use strict';
Vue.use(VueLazyload) //注册该组件
new Vue({
el: '#app',
data: {
dataInfo: {}
},
created() {
var that = this;
},
mounted() {
this.getDateInfo(); //获取数据值
},
methods: {
/**
* 获取数据值
*/
getDateInfo() {
this.dataInfo = jsonData; //赋值
//把图片的src替换为data-src
this.dataInfo.dusmi_content = this.dataInfo.dusmi_content.replace(/src/g, "data-src");
this.dataInfo.dusmi_push_time = this.dataInfo.dusmi_push_time.split(' ');
//日期 yy-mm-dd换成 yy/mm/dd
var date = this.dataInfo.dusmi_push_time[0];
var dateStr = this.dataInfo.dusmi_push_time[0].replace(/-/g, "/");
//时间获取小时和分钟
var time = this.dataInfo.dusmi_push_time[1]
var timeArr = time.split(':');
var timeStr = timeArr[0] + ':' + timeArr[1];
// console.info(date, dateStr, time, timeArr, timeStr)
this.dataInfo.date = dateStr;
this.dataInfo.time = timeStr;
},
appSource: function() {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {
this.barHeight = true
return "ios";
} else {
return "andriod";
}
}
}
})
</script>
</body>
</html>
The Json data is as follows:
var jsonData = {
"dusmi_id": 123456789,
"dusmi_push_time": "2022-10-04 10:00:09",
"dusmi_title": "系统消息标题",
"dusmi_desc": "系统消息备注",
"dusmi_content": " <p style=\"text-align: center;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623839972604432_5544.jpg?v=1665623840\"\n style=\"max-width:100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623840222765767_7577.jpg?v=1665623840\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623840387826476_9955.jpg?v=1665623840\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623840564652821_2429.jpg?v=1665623840\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623840737006310_1423.jpg?v=1665623840\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623840923138904_6422.jpg?v=1665623841\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623841112860137_3511.jpg?v=1665623841\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623841308319297_1203.jpg?v=1665623841\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623841514952473_3156.jpg?v=1665623841\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623841725503364_7843.jpg?v=1665623841\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623841928260187_4197.jpg?v=1665623842\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623842179947741_2419.jpg?v=1665623842\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623842425401092_6493.jpg?v=1665623842\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623842649991565_2940.jpg?v=1665623842\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623842881340338_5947.jpg?v=1665623842\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623843056290719_6734.jpg?v=1665623843\"\n style=\"text-align: left; max-width: 100%;\"><img\n src=\"http://f.zsbab.com/f/730000/img/730012/product/basicinfo/1145936457_1665623843185623282_1699.jpg?v=1665623843\"\n style=\"text-align: left; max-width: 100%;\"><br></p>"
}