lkddi/nexusphp
1
0
Fork 0
mirror of https://github.com/lkddi/nexusphp.git synced 2026-04-14 20:40:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

image lazy load

Browse Source
This commit is contained in:
xiaomlove
2022-08-31 23:08:26 +08:00
parent 8d3d404141
commit 138ee2b86a
7 changed files with 100 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/js/nexus.js vendored
View File

@@ -8,9 +8,21 @@ jQuery(document).ready(function () {
}
})
// preview
function getPosition(e, imgEle) {
let imgWidth = imgEle.prop('naturalWidth')
let imgHeight = imgEle.prop("naturalHeight")
console.log(`imgWidth: ${imgWidth}, imgHeight: ${imgHeight}`)
let ratio = imgWidth / imgHeight;
if (imgWidth > window.innerWidth) {
imgWidth = window.innerWidth;
imgHeight = imgWidth / ratio;
}
if (imgHeight > window.innerHeight) {
imgHeight = window.innerHeight;
imgWidth = imgHeight * ratio;
}
let width = imgWidth, height= imgHeight;
let left = e.pageX + 10;
if (left + imgWidth > window.innerWidth) {
left = e.pageX - 10 - imgWidth
@@ -19,7 +31,9 @@ jQuery(document).ready(function () {
if (top + imgHeight > window.innerHeight) {
top = e.pageY - imgHeight / 2
}
return {left, top}
let result = {left, top, width, height}
console.log(result)
return result
}
var previewEle = jQuery('#nexus-preview')
var imgEle, selector = '.preview'
@@ -37,4 +51,25 @@ jQuery(document).ready(function () {
previewEle.css(position)
})
// lazy load
if ("IntersectionObserver" in window) {
const imgList = [...document.querySelectorAll('.nexus-lazy-load')]
var io = new IntersectionObserver((entries) =>{
entries.forEach(item => {
// isIntersecting是一个Boolean值，判断目标元素当前是否可见
if (item.isIntersecting) {
item.target.src = item.target.dataset.src
item.target.classList.add('preview')
// 图片加载后即停止监听该元素
io.unobserve(item.target)
}
})
}, {
root: document.querySelector('body')
})
// observe遍历监听所有img节点
imgList.forEach(img => io.observe(img))
}
})

41
public/pic/misc/spinner.svg Normal file
View File

@@ -0,0 +1,41 @@
<svg class="lds-spinner" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(36 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(72 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(108 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(144 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(216 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(252 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(288 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(324 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB