PTT web enhanced

PTT web image enhanced

Enhance PTT web image load performance
目前為 2021-10-10 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         PTT web image enhanced
// @namespace    2CF9973A-28C9-11EC-9EA6-98F49F6E8EAB
// @version      1.1
// @description  Enhance PTT web image load performance
// @author       Rick0
// @match        https://www.ptt.cc/bbs/*/*.html*
// @grant        GM.xmlHttpRequest
// @connect      imgur.com
// ==/UserScript==

(async function() {
  'use strict'

  function createElement(html) {
    let template = document.createElement('template')
    template.innerHTML = html
    
    return template.content.firstChild
  }

  function getHeaders (url) {
    return new Promise((resolve, reject) => {
      GM.xmlHttpRequest({
        url,
        method: 'HEAD',
        headers: {
          referer: 'https://imgur.com/',
        },
        onload: function (res) {
          let headers = res.responseHeaders
            .split(/\r?\n/)
            .slice(0, -1)
            .reduce((result, item) => {
              let [, key, val] = item.match(/(.+?): +(.+)/)
              result[key] = val
              return result
            }, {})
          resolve(headers)
        },
        onerror: function (err) {
          reject(err)
        },
      })
    })
  }
  
  // 先將 imgur 的圖片都取消載入，並且存入到 imgurMap 中
  let imgurMap = new Map()
  for (let img of document.querySelectorAll('.richcontent > img')) {
    let url = img.parentElement.previousElementSibling?.href ?? img.parentElement.previousElementSibling?.querySelector('a')?.href
    if (/^https?:\/\/(?:\w+\.)?imgur\.com\/\w+\.\w+$/.test(url)) {
      img.src = ''
      imgurMap.set(img, url)
    }
  }

  // 設定網頁資源跨域存取時不設定 referrer
  document.head.appendChild(createElement('<meta name="referrer" content="no-referrer">'))

  // 將 imgur 的圖片判斷後填入需要的格式網址
  for (let [img, url] of imgurMap) {
    let imgReg = url.match(/^https?:\/\/(?:\w+\.)?imgur\.com\/(\w{7})\w?\.(\w+)$/)
    let originalImgUrl = `https://i.imgur.com/${imgReg[1]}.${imgReg[2]}`

    getHeaders(originalImgUrl)
      .then(headers => {
        if (headers['content-type'] === 'image/gif') {
          img.outerHTML = `<video src="https://i.imgur.com/${imgReg[1]}.mp4" controls loop muted style="max-width: 100%;max-height: 800px;"></video>`
        } else {
          img.src = `https://i.imgur.com/${imgReg[1]}h.${imgReg[2]}`
        }
      })
      .catch(err => err)
  }
})()