MeiziTuAutoLoad

MeiziTuAutoLoad!

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         MeiziTuAutoLoad
// @namespace    //tampermonkey.net/
// @version      0.2.0
// @description  MeiziTuAutoLoad!
// @author       cuzfinal
// @match        http*://www.mzitu.com/*
// @grant        none
// ==/UserScript==
let loadInterval
const config = {
  hostName: location.hostname,
  interval: 200,   // 发起一次请求后200ms内不再发起
  isInterval: 0,
  overSet: document.documentElement.clientHeight * 0.2    // 分页导航距离屏幕底部大于屏幕高度20%时触发加载
}
const defaultParams = {
  method: 'GET',
}

const hostRegular = {
  'www.mzitu.com': {
    container: '.main-image',
    pageUrl() { return `/${this.articleId}/${++this.page}` },
    page: location.href.match(/\/\d(\d)?$/) && location.href.match(/\/(\d(\d)?)$/)[1] || 1,
    articleId: location.href.match(/com\/(\d+)/)[1],
    hideNodes: null,
    nav: '.pagenavi',
    isOver(next) {
      return next.nav.lastElementChild.textContent === "下一组»"
    },
    extra: () => { }
  }
}

const current = hostRegular[config.hostName]
const box = document.querySelector(current.container)
let pageNav = getNav()
const io = new IntersectionObserver(loadNext)

function getNav() {
  return document.querySelector(current.nav)
}

function getTitle(node) {
  if (node.tagName === 'TITLE') {
    return node.outerText
  }
}

function parseNextPage(dom) {
  let content, nav, title
  content = current.next ? dom.querySelectorAll(current.next) : [...dom.querySelector(current.container).children]
  nav = dom.querySelector(current.nav)
  const result = { content, nav, title }
  current.isOver && current.isOver(result, dom)
  return result
}

async function loadNext(entries) {
  if(!entries[0].isIntersecting) return
  io.unobserve(pageNav)

  const nextUrl = current.pageUrl()
  try {
    const resp = await fetch(nextUrl, current.params || defaultParams)
    const parser = new DOMParser()
    const dom = parser.parseFromString(await resp.text(), 'text/html')
    const next = parseNextPage(dom)
    if (resp.status === 404) {
      loadOver()
    } else {
      next.content.forEach(el => box.appendChild(el))
      if (next.nav) {
        pageNav.parentNode.replaceChild(next.nav, pageNav)
        pageNav = getNav()
        io.observe(pageNav)
      }
      if (next.title) {
        document.title = next.title
      }
    }
    current.isOver(next, dom) && (loadOver())
  } catch (e) {
    loadOver()
    console.log(e)
  }
}

function hideURL() {
  [...document.querySelectorAll(current.hideNodes)].forEach(el => el.style.display = "none")
}

function loadOver() {
  io.disconnect()
  hideURL()
  current.extra && current.extra()
  console.log('Preload loaded!')
}

(function () {
  // Your code here...
  current.beforeLoad && current.beforeLoad()
  window.addEventListener("load", () => io.observe(pageNav))
  console.log('Preload loading...')
})();