m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-24 10:51:27 +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() {
return [
// () => tree => {
// visit(tree, "element", (node, index) => {
// if (node.tagName === "p" && node.children[0].tagName === "img") {
// node.tagName = "figure"
// let img = node.children[0]
// let sign = md5(img.properties.src)
// let data = img.properties.alt.split("|")
// let alt = data[0]
// let size = "big"
// if (data.length > 1) {
// size = data[1]
// }
// let classes = ["image component image-full-bleed body-copy-wide nr-scroll-animation nr-scroll-animation--on"]
// classes.push(`image-${size}`)
// node.properties.className = classes
// node.children = [
// {
// type: "element",
// tagName: "div",
// properties: {
// className: ["component-content"],
// },
// children: [
// {
// type: "element",
// tagName: "div",
// properties: {
// className: ["image-share-sheet"],
// },
// children: [
// {
// type: "element",
// tagName: "div",
// properties: {
// className: [`image image-load image-asset image-${sign}`],
// id: `lht${sign}`,
// },
// children: [
// {
// type: "element",
// tagName: "picture",
// properties: {
// className: ["picture"],
// },
// children: [
// {
// type: "element",
// tagName: "img",
// properties: {
// "data-src": img.properties.src,
// alt: alt,
// className: ["picture-image"],
// },
// },
// ],
// },
// ],
// },
// ],
// },
// {
// type: "element",
// tagName: "div",
// properties: {
// className: ["image-description"],
// },
// children: [
// {
// type: "element",
// tagName: "div",
// properties: {
// className: ["image-caption"],
// },
// children: [
// {
// type: "text",
// value: alt,
// },
// ],
// },
// ],
// },
// ],
// },
// ]
// }
// })
// },
() => tree => {
visit(tree, "element", (node, index) => {
if (node.tagName === "p" && node.children[0].tagName === "img") {
node.tagName = "figure"
let img = node.children[0]
let sign = md5(img.properties.src)
let data = img.properties.alt.split("|")
let alt = data[0]
let size = "big"
if (data.length > 1) {
size = data[1]
}
let classes = ["image component image-full-bleed body-copy-wide nr-scroll-animation nr-scroll-animation--on"]
classes.push(`image-${size}`)
node.properties.className = classes
node.children = [
{
type: "element",
tagName: "div",
properties: {
className: ["component-content"],
},
children: [
{
type: "element",
tagName: "div",
properties: {
className: ["image-share-sheet"],
},
children: [
{
type: "element",
tagName: "div",
properties: {
className: [`image image-loaded image-asset image-${sign}`],
id: `lht${sign}`,
},
children: [
{
type: "element",
tagName: "picture",
properties: {
className: ["picture"],
},
children: [
{
type: "element",
tagName: "img",
properties: {
src: img.properties.src,
alt: alt,
className: ["picture-image"],
},
},
],
},
],
},
],
},
{
type: "element",
tagName: "div",
properties: {
className: ["image-description"],
},
children: [
{
type: "element",
tagName: "div",
properties: {
className: ["image-caption"],
},
children: [
{
type: "text",
value: alt,
},
],
},
],
},
],
},
]
}
})
},
() => tree => {
tree.children.forEach(node => {
if (node.type === "raw") {

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

@ -5,7 +5,7 @@ var animationElementName = ".small-load"
// Hookable function
var loadAnimation = function (item) {
const img = new Image()
img.src = item.children[0].children[0].dataset.src
img.src = item.children[0].children[0].src
img.onload = function () {
item.classList.remove("small-load", "medium-load", "large-load")
item.classList.add("small-loaded", "medium-loaded", "large-loaded")
@ -17,7 +17,6 @@ var loadImage = function (index) {
if (index >= imageElements.length) return
const item = imageElements[index]
const image = new Image()
item.src = item.dataset.src
image.src = item.src
image.onload = function () {
loadImage(index + 1)
@ -26,7 +25,8 @@ var loadImage = function (index) {
function initImage() {
// 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
loadImage(0)

2
src/layouts/MoreTile.astro
View file

@ -21,7 +21,7 @@ const label = `${title} - ${type} - 发表时间 ${dateFormatted}`
aria-label={label}
>
<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 class="tile__description" aria-hidden="true">
<div class="tile__head">

2
src/layouts/Tile.astro
View file

@ -21,7 +21,7 @@ const label = `${title} - ${type} - 发表时间 ${dateFormatted}`;
aria-label={label}
>
<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 class="tile__description" aria-hidden="true">

3758
src/styles/global.css
View file

File diff suppressed because it is too large Load diff