☰

PTT web image enhanced

Enhance PTT web image load performance

当前为 2021-10-09 提交的版本，查看 最新版本。

// ==UserScript==
// @name         PTT web image enhanced
// @namespace    2CF9973A-28C9-11EC-9EA6-98F49F6E8EAB
// @version      1.0
// @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)
        },
      })
    })
  }
  
  document.head.appendChild(createElement('<meta name="referrer" content="no-referrer">'))

  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 = ''
    } else {
      continue
    }

    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" autoplay loop></video>`
        } else {
          img.src = `https://i.imgur.com/${imgReg[1]}h.${imgReg[2]}`
        }
      })
      .catch(err => {
        console.log(err)
      })
  }
})()