邊緣人的程式網誌

  哎呀,以前在資料管理的部分都被Vuex綁死死,但是在typescript相對來說是很不友善的(我有寫一篇 for vuex在typescript 去定義),自從我用了vue3 的composition API及reactive 就直接使用了 yarn remove vuex ,在typescript的世界裡就是要清清楚楚,簡簡單單,甚麼模板轉換的才不需要呢 我們來創自己管資料的地方吧 type.ts: export interface InterComicsData extends InterGenre { id: string; mainIndex: string; mainIndex_name: string; descr: string; link: string; title: string; thumbnail_name: string; thumbnail_url: string; lastUpdateTime: string; createTime: string; genreDatas: InterGenre[]; } export interface InterGenre { id: string; rootComics_id: string; name: string; } export interface InterComics { comicDatas: InterComicsData[]; genreDatas: InterGenre[]; pageLimit: Number; } comics.ts: 我有做一個漫畫站,這邊是用來管理comics的地方 import Vue, { reactive, defineComponent, readonly } from "vue"; import { InterComicsData, InterComics, InterGenre } from "@/store/comics/type"; import axios from "axios"; import * as data

在Chrome底下可以使用在img DOM加入 loading="lazy" 就可以直接使用懶加載了,或者裝線上有的plugin也可以的(但是我喜歡自己來) <img src="image.png" loading="lazy" alt="..." /> 但IE跟Safari是不支援這樣的語法的,所以只好自己幹一個了,我們來用 IntersectionObserver吧(結果IE 也沒支援attribute QAQ) //註冊在讀取圖檔時要做的事情 window.addEventListener('load', () => {      const watcher = new IntersectionObserver(onEnterView) const elementArrary = document.getElementsByClassName('your_imgName'); for (let image of elementArrary) { watcher.observe(image) // 開始監視 } } //IntersectionObserver 的call back function onEnterView(entries: IntersectionObserverEntry[], observer: IntersectionObserver) { for (let entry of entries) { if (entry.isIntersecting) { // Element show on the loadImage(entry.target) // cancel watch observer.unobserve(entry.target) } } } // load img logic function loadImage(img: HTMLImageElement) { const removeMockup = (