191 lines
8.1 KiB
HTML
191 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>测试</title>
|
|
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
|
|
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
|
|
<link rel="stylesheet" href="index.css">
|
|
<style>
|
|
</style>
|
|
<script src="layuiadmin/layui/layui.js"></script>
|
|
<!-- 引入 -->
|
|
<!-- universal -->
|
|
<script src="js/universal/universal.js"></script>
|
|
<link rel="stylesheet" href="js/universal/universal.css">
|
|
<!-- viewer js -->
|
|
<script src="js/viewer/viewer.min.js"></script>
|
|
<link rel="stylesheet" href="js/viewer/viewer.min.css">
|
|
<!-- <script src="js/viewer/jquery-viewer.min.js"></script> -->
|
|
</head>
|
|
|
|
<body>
|
|
<div id="pics" style="height: 600px; overflow-y: auto; border: 1px solid red;"></div>
|
|
</body>
|
|
|
|
<script>
|
|
layui.config({
|
|
base: './layuiadmin/'
|
|
}).extend({
|
|
index: 'lib/index'
|
|
}).use(['jquery', 'flow'], function(){
|
|
var $ = layui.$
|
|
,flow = layui.flow
|
|
|
|
var pics = [
|
|
"../attachments/design/big/19w1102_81.jpg",
|
|
"images/no_pic.png",
|
|
"../attachments/design/big/19w1104_82.jpg",
|
|
"../attachments/design/big/19w1105_81.jpg",
|
|
"../attachments/design/big/19w1106_61.jpg",
|
|
"../attachments/design/big/19w1107_81.jpg",
|
|
"../attachments/design/big/19w1108_91.jpg",
|
|
"../attachments/design/big/19w1109_11.jpg",
|
|
"../attachments/design/big/19w1110_91.jpg",
|
|
"../attachments/design/big/19w1111_13.jpg",
|
|
"../attachments/design/big/19w1112_11.jpg",
|
|
"../attachments/design/big/19w1113_91.jpg",
|
|
"../attachments/design/big/19w1114_11.jpg",
|
|
"../attachments/design/big/19w1115_61.jpg",
|
|
"../attachments/design/big/19w1116_11.jpg",
|
|
"../attachments/design/big/19w1117_51.jpg",
|
|
"../attachments/design/big/19w1118_62.jpg",
|
|
"../attachments/design/big/19w1119_31.jpg",
|
|
"../attachments/design/big/19w1120_62.jpg",
|
|
"../attachments/design/big/19w1121_61.jpg",
|
|
"../attachments/design/big/19w1122_81.jpg",
|
|
"../attachments/design/big/19w1123_31.jpg",
|
|
"../attachments/design/big/19w1124_11.jpg",
|
|
"../attachments/design/big/19w1125_51.jpg",
|
|
"../attachments/design/big/19w1126_82.jpg",
|
|
"../attachments/design/big/19w1127_81.jpg",
|
|
"../attachments/design/big/19w1128_91.jpg",
|
|
"../attachments/design/big/19w1129_91.jpg",
|
|
"../attachments/design/big/19w1131_11.jpg",
|
|
"../attachments/design/big/19w1132_91.jpg",
|
|
"../attachments/design/big/19w1133_91.jpg",
|
|
"../attachments/design/big/19w1134_91.jpg",
|
|
"../attachments/design/big/19w1135_52.jpg",
|
|
"../attachments/design/big/19w1136_81.jpg",
|
|
"../attachments/design/big/19w1137_81.jpg",
|
|
"../attachments/design/big/19w1138_52.jpg",
|
|
"../attachments/design/big/19w1139_11.jpg",
|
|
"../attachments/design/big/19w2121_91.jpg",
|
|
"../attachments/design/big/19w2122_82.jpg",
|
|
"../attachments/design/big/19w2123_91.jpg",
|
|
"../attachments/design/big/19w6190_91.jpg",
|
|
"../attachments/design/big/19w6191_61.jpg",
|
|
"../attachments/design/big/19w6192_82.jpg",
|
|
"../attachments/design/big/19w6193_61.jpg",
|
|
"../attachments/design/big/19w6194_61.jpg",
|
|
"../attachments/design/big/19w6195_61.jpg",
|
|
"../attachments/design/big/19w6196_61.jpg",
|
|
"../attachments/design/big/19w8101_62.jpg",
|
|
"../attachments/design/big/19w8102_61.jpg",
|
|
"../attachments/design/big/19w8103_62.jpg",
|
|
"../attachments/design/big/19w8104_31.jpg",
|
|
"../attachments/design/big/19w8105_81.jpg",
|
|
"../attachments/design/big/19w9101_31.jpg",
|
|
"../attachments/design/big/19w9102_61.jpg",
|
|
"../attachments/design/big/19w9103_31.jpg",
|
|
"../attachments/design/big/19w9104_31.jpg",
|
|
"../attachments/design/big/Y811101F00_88.jpg",
|
|
"../attachments/design/big/Y811102W00_32.jpg",
|
|
"../attachments/design/big/Y811103K60_99.jpg",
|
|
"../attachments/design/big/Y811104K10_99.jpg",
|
|
"../attachments/design/big/Y811104K11_17.jpg",
|
|
"../attachments/design/big/Y811105W00_17.jpg",
|
|
"../attachments/design/big/Y811106F00_17.jpg",
|
|
"../attachments/design/big/Y811107W00_32.jpg",
|
|
"../attachments/design/big/Y811108C00_66.jpg",
|
|
"../attachments/design/big/Y811108C01_64.jpg",
|
|
"../attachments/design/big/Y811109Z20_66.jpg",
|
|
"../attachments/design/big/Y811110C00_64.jpg",
|
|
"../attachments/design/big/Y811111W00_19.jpg",
|
|
"../attachments/design/big/Y811112C00_66.jpg",
|
|
"../attachments/design/big/Y811113C50_38.jpg",
|
|
"../attachments/design/big/Y811113C51_92.jpg",
|
|
"../attachments/design/big/Y811114L40_40.jpg",
|
|
"../attachments/design/big/Y811114L41_89.jpg",
|
|
"../attachments/design/big/Y811115K60_99.jpg",
|
|
"../attachments/design/big/Y811116L00_38.jpg",
|
|
"../attachments/design/big/Y811116L01_92.jpg",
|
|
"../attachments/design/big/Y811117K10_99.jpg",
|
|
"../attachments/design/big/Y811118Q20_99.jpg",
|
|
"../attachments/design/big/Y811119Q20_19.jpg",
|
|
"../attachments/design/big/Y811120Z00_66.jpg",
|
|
"../attachments/design/big/Y811121Z00_66.jpg",
|
|
"../attachments/design/big/Y811122Z00_66.jpg",
|
|
"../attachments/design/big/Y811123G00_99.jpg",
|
|
"../attachments/design/big/Y811124Z00_66.jpg",
|
|
"../attachments/design/big/Y811126Q10_99.jpg",
|
|
"../attachments/design/big/Y811127W00_40.jpg",
|
|
"../attachments/design/big/Y811128F00_88.jpg",
|
|
"../attachments/design/big/Y811129W00_40.jpg",
|
|
"../attachments/design/big/12W3136_91.jpg",
|
|
"../attachments/design/big/12W3139_52.jpg",
|
|
"../attachments/design/big/12W3140_91.jpg",
|
|
"../attachments/design/big/12W3141_11.jpg",
|
|
"../attachments/design/big/12W3142_61.jpg",
|
|
"../attachments/design/big/12W3143_52.jpg",
|
|
"../attachments/design/big/12W3144_23.jpg",
|
|
"../attachments/design/big/12W3145_11.jpg",
|
|
"../attachments/design/big/12W3146_51.jpg",
|
|
"../attachments/design/big/12W5101_41.jpg",
|
|
"../attachments/design/big/12W5102_13.jpg",
|
|
"../attachments/design/big/12W5103_91.jpg",
|
|
"../attachments/design/big/12W5104_11.jpg",
|
|
"../attachments/design/big/12W5105_52.jpg",
|
|
"../attachments/design/big/12W5106_81.jpg",
|
|
"../attachments/design/big/12W5107_13.jpg",
|
|
"../attachments/design/big/12W5108_23.jpg",
|
|
"../attachments/design/big/12W5109_13.jpg",
|
|
"../attachments/design/big/12W5110_11.jpg"
|
|
]
|
|
for (var i = 0; i < pics.length; i++) {
|
|
$('#pics').append('<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a851599d4688a801201794912bf9.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621392984&t=56763d3d45700becc8bc08502d98099a" data-src="'+pics[i]+'" />')
|
|
}
|
|
|
|
window.onload = () => {
|
|
var eles = document.querySelectorAll('#pics img'); // 获取所有列表元素
|
|
|
|
// 监听回调
|
|
var callback = (entries) => {
|
|
entries.forEach(item => {
|
|
// 出现到可视区
|
|
if (item.intersectionRatio > 0) {
|
|
var ele = item.target;
|
|
var imgSrc = ele.getAttribute('data-src');
|
|
if (imgSrc) {
|
|
// 预加载
|
|
var img = new Image();
|
|
img.addEventListener('load', function() {
|
|
ele.src = imgSrc;
|
|
}, false);
|
|
ele.src = imgSrc;
|
|
// 加载过清空路径，避免重复加载
|
|
ele.removeAttribute('data-src');
|
|
}
|
|
}
|
|
})
|
|
}
|
|
var observer = new IntersectionObserver(callback);
|
|
|
|
// 列表元素加入监听
|
|
eles.forEach(item => {
|
|
observer.observe(item);
|
|
})
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
#pics img {
|
|
|
|
}
|
|
</style>
|
|
</html> |