diff --git a/astro.config.mts b/astro.config.mts index eb9ba8f..dba5f0e 100644 --- a/astro.config.mts +++ b/astro.config.mts @@ -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") { diff --git a/public/static/js/animation.js b/public/static/js/animation.js index ca2f364..d4d38ee 100644 --- a/public/static/js/animation.js +++ b/public/static/js/animation.js @@ -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) diff --git a/src/layouts/MoreTile.astro b/src/layouts/MoreTile.astro index 3ed02fb..7d2aad2 100644 --- a/src/layouts/MoreTile.astro +++ b/src/layouts/MoreTile.astro @@ -21,7 +21,7 @@ const label = `${title} - ${type} - 发表时间 ${dateFormatted}` aria-label={label} >