m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-25 02:56:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix image load animation

Browse source
This commit is contained in:
LazuliKao 2024-09-22 17:59:17 +08:00
parent 304b1c3ab7
commit 5b7a75acde
5 changed files with 2335 additions and 1609 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

176
astro.config.mts
View file

@ -10,94 +10,94 @@ import md5 from "md5"
function pipeline() { function pipeline() {
return [ return [
// () => tree => { () => tree => {
// visit(tree, "element", (node, index) => { visit(tree, "element", (node, index) => {
// if (node.tagName === "p" && node.children[0].tagName === "img") { if (node.tagName === "p" && node.children[0].tagName === "img") {
// node.tagName = "figure" node.tagName = "figure"
// let img = node.children[0] let img = node.children[0]
// let sign = md5(img.properties.src) let sign = md5(img.properties.src)
// let data = img.properties.alt.split("|") let data = img.properties.alt.split("|")
// let alt = data[0] let alt = data[0]
// let size = "big" let size = "big"
// if (data.length > 1) { if (data.length > 1) {
// size = data[1] size = data[1]
// } }
// let classes = ["image component image-full-bleed body-copy-wide nr-scroll-animation nr-scroll-animation--on"] let classes = ["image component image-full-bleed body-copy-wide nr-scroll-animation nr-scroll-animation--on"]
// classes.push(`image-${size}`) classes.push(`image-${size}`)
// node.properties.className = classes node.properties.className = classes
// node.children = [ node.children = [
// { {
// type: "element", type: "element",
// tagName: "div", tagName: "div",
// properties: { properties: {
// className: ["component-content"], className: ["component-content"],
// }, },
// children: [ children: [
// { {
// type: "element", type: "element",
// tagName: "div", tagName: "div",
// properties: { properties: {
// className: ["image-share-sheet"], className: ["image-share-sheet"],
// }, },
// children: [ children: [
// { {
// type: "element", type: "element",
// tagName: "div", tagName: "div",
// properties: { properties: {
// className: [`image image-load image-asset image-${sign}`], className: [`image image-loaded image-asset image-${sign}`],
// id: `lht${sign}`, id: `lht${sign}`,
// }, },
// children: [ children: [
// { {
// type: "element", type: "element",
// tagName: "picture", tagName: "picture",
// properties: { properties: {
// className: ["picture"], className: ["picture"],
// }, },
// children: [ children: [
// { {
// type: "element", type: "element",
// tagName: "img", tagName: "img",
// properties: { properties: {
// "data-src": img.properties.src, src: img.properties.src,
// alt: alt, alt: alt,
// className: ["picture-image"], className: ["picture-image"],
// }, },
// }, },
// ], ],
// }, },
// ], ],
// }, },
// ], ],
// }, },
// { {
// type: "element", type: "element",
// tagName: "div", tagName: "div",
// properties: { properties: {
// className: ["image-description"], className: ["image-description"],
// }, },
// children: [ children: [
// { {
// type: "element", type: "element",
// tagName: "div", tagName: "div",
// properties: { properties: {
// className: ["image-caption"], className: ["image-caption"],
// }, },
// children: [ children: [
// { {
// type: "text", type: "text",
// value: alt, value: alt,
// }, },
// ], ],
// }, },
// ], ],
// }, },
// ], ],
// }, },
// ] ]
// } }
// }) })
// }, },
() => tree => { () => tree => {
tree.children.forEach(node => { tree.children.forEach(node => {
if (node.type === "raw") { if (node.type === "raw") {

6
public/static/js/animation.js
View file

@ -5,7 +5,7 @@ var animationElementName = ".small-load"
// Hookable function // Hookable function
var loadAnimation = function (item) { var loadAnimation = function (item) {
const img = new Image() const img = new Image()
img.src = item.children[0].children[0].dataset.src img.src = item.children[0].children[0].src
img.onload = function () { img.onload = function () {
item.classList.remove("small-load", "medium-load", "large-load") item.classList.remove("small-load", "medium-load", "large-load")
item.classList.add("small-loaded", "medium-loaded", "large-loaded") item.classList.add("small-loaded", "medium-loaded", "large-loaded")
@ -17,7 +17,6 @@ var loadImage = function (index) {
if (index >= imageElements.length) return if (index >= imageElements.length) return
const item = imageElements[index] const item = imageElements[index]
const image = new Image() const image = new Image()
item.src = item.dataset.src
image.src = item.src image.src = item.src
image.onload = function () { image.onload = function () {
loadImage(index + 1) loadImage(index + 1)
@ -26,7 +25,8 @@ var loadImage = function (index) {
function initImage() { function initImage() {
// get all the images with data-src attribute // get all the images with data-src attribute
imageElements = document.querySelectorAll("img[data-src]") // imageElements = document.querySelectorAll("img[data-src]")
imageElements = document.querySelectorAll(".image-load, .small-load, .medium-load, .large-load")
// load the images one by one // load the images one by one
loadImage(0) loadImage(0)

2
src/layouts/MoreTile.astro
View file

@ -21,7 +21,7 @@ const label = `${title} - ${type} - 发表时间 ${dateFormatted}`
aria-label={label} aria-label={label}
> >
<div class="tile__media" aria-hidden="true"> <div class="tile__media" aria-hidden="true">
<img class="cover image" data-src={image} alt="lt" /> <img class="cover image" src={image} alt="lt" />
</div> </div>
<div class="tile__description" aria-hidden="true"> <div class="tile__description" aria-hidden="true">
<div class="tile__head"> <div class="tile__head">

2
src/layouts/Tile.astro
View file

@ -21,7 +21,7 @@ const label = `${title} - ${type} - 发表时间 ${dateFormatted}`;
aria-label={label} aria-label={label}
> >
<div class="tile__media" aria-hidden="true"> <div class="tile__media" aria-hidden="true">
<img class="cover image" data-src={cover} alt="lt" /> <img class="cover image" src={cover} alt="lt" />
</div> </div>
<div class="tile__description" aria-hidden="true"> <div class="tile__description" aria-hidden="true">

3754
src/styles/global.css
View file

File diff suppressed because it is too large Load diff