instantclick - ajax无刷新预加载页面

html 代码

<script src="路径/instantclick.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

instantclick 代码

var InstantClick = function(document, location) {
        var currentLocationWithoutHash
        var urlToPreload
        var preloadTimer
        var pHistory = {}
        var p = {}
        var useBlacklist = true
        var preloadOnMousedown
        var delayBeforePreload
        var listeners = {
            change: []
        }
        function removeHash(url) {
            var index = url.indexOf('#') if (index == -1) {
                return url
            }
            return url.substr(0, index)
        }
        function getLinkTarget(target) {
            while (target.nodeName != 'A') {
                target = target.parentNode
            }
            return target
        }
        function triggerPageEvent(type) {
            for (var i = 0; i < listeners[type].length; i++) {
                listeners[type][i]()
            }
        }
        function changePage(title, body) {
            var doc = document.implementation.createHTMLDocument('') doc.documentElement.innerHTML = body document.documentElement.replaceChild(doc.body, document.body) var elem = document.createElement('i') elem.innerHTML = title document.title = elem.textContent
        }
        function mousedown(e) {
            preload(getLinkTarget(e.target).href)
        }
        function mouseover(e) {
            var a = getLinkTarget(e.target) a.addEventListener('mouseout', mouseout) if (!delayBeforePreload) {
                preload(a.href)
            } else {
                urlToPreload = a.href preloadTimer = setTimeout(preload, delayBeforePreload)
            }
        }
        function click(e) {
            if (e.which > 1 || e.metaKey || e.ctrlKey) {
                return
            }
            e.preventDefault() display(getLinkTarget(e.target).href)
        }
        function mouseout() {
            if (preloadTimer) {
                clearTimeout(preloadTimer) preloadTimer = false
                return
            }
            if (!p.isPreloading || (p.isPreloading && p.isWaitingForCompletion)) {
                return
            }
            p.xhr.abort() p.isPreloading = false p.isWaitingForCompletion = false
        }
        function readystatechange(e) {
            if (p.xhr.readyState < 4) {
                return
            }
            if (p.xhr.status == 0) {
                return
            }
            p.timing.ready = +new Date - p.timing.start
            var text = p.xhr.responseText
            var titleIndex = text.indexOf('<title') if (titleIndex > -1) {
                p.title = text.substr(text.indexOf('>', titleIndex) + 1) p.title = p.title.substr(0, p.title.indexOf('</title'))
            }
            var bodyIndex = text.indexOf('<body') if (bodyIndex > -1) {
                p.body = text.substr(bodyIndex) var closingIndex = p.body.indexOf('</body') if (closingIndex > -1) {
                    p.body = p.body.substr(0, closingIndex)
                }
                var urlWithoutHash = removeHash(p.url) pHistory[urlWithoutHash] = {
                    body: p.body,
                    title: p.title,
                    scrollY: urlWithoutHash in pHistory ? pHistory[urlWithoutHash].scrollY : 0
                }
            } else {
                p.hasBody = false
            }
            if (p.isWaitingForCompletion) {
                p.isWaitingForCompletion = false display(p.url)
            }
        }
        function instantanize(isInitializing) {
            var as = document.getElementsByTagName('a'),
                a, domain = location.protocol + '//' + location.host
            for (var i = as.length - 1; i >= 0; i--) {
                a = as[i]
                if (a.target || a.hasAttribute('download') || a.href.indexOf(domain + '/') != 0 || a.href.indexOf('#') > -1 && removeHash(a.href) == currentLocationWithoutHash || (useBlacklist ? a.hasAttribute('data-no-instant') : !a.hasAttribute('data-instant'))) {
                    continue
                }
                if (preloadOnMousedown) {
                    a.addEventListener('mousedown', mousedown)
                } else {
                    a.addEventListener('mouseover', mouseover)
                }
                a.addEventListener('click', click)
            }
            if (!isInitializing) {
                var scripts = document.getElementsByTagName('script'),
                    script, copy, parentNode, nextSibling
                for (i = 0, j = scripts.length; i < j; i++) {
                    script = scripts[i]
                    if (script.hasAttribute('data-no-instant')) {
                        continue
                    }
                    copy = document.createElement('script') if (script.src) {
                        copy.src = script.src
                    }
                    if (script.innerHTML) {
                        copy.innerHTML = script.innerHTML
                    }
                    parentNode = script.parentNode nextSibling = script.nextSibling parentNode.removeChild(script) parentNode.insertBefore(copy, nextSibling)
                }
            }
            triggerPageEvent('change')
        }
        function preload(url) {
            if (!preloadOnMousedown && 'display' in p.timing && +new Date - (p.timing.start + p.timing.display) < 100) {
                return
            }
            if (preloadTimer) {
                clearTimeout(preloadTimer) preloadTimer = false
            }
            if (!url) {
                url = urlToPreload
            }
            if ((p.isPreloading && url == p.url) || (p.isPreloading && p.isWaitingForCompletion)) {
                return
            }
            p.isPreloading = true p.isWaitingForCompletion = false p.url = url p.body = false p.hasBody = true p.timing = {}
            p.timing.start = +new Date p.xhr.open('GET', url) p.xhr.send()
        }
        function display(url) {
            if (!('display' in p.timing)) {
                p.timing.display = +new Date - p.timing.start
            }
            if (preloadTimer) {
                if (p.url && p.url != url) {
                    location.href = url
                    return
                }
                preload(url) p.isWaitingForCompletion = true
                return
            }
            if (!p.isPreloading || (p.isPreloading && p.isWaitingForCompletion)) {
                location.href = url
                return
            }
            if (!p.hasBody) {
                location.href = p.url
                return
            }
            if (!p.body) {
                p.isWaitingForCompletion = true
                return
            }
            pHistory[currentLocationWithoutHash].scrollY = pageYOffset p.isPreloading = false p.isWaitingForCompletion = false changePage(p.title, p.body) var hashIndex = p.url.indexOf('#') var hashElem = hashIndex > -1 && document.getElementById(p.url.substr(hashIndex + 1)) var offset = 0
            if (p.url != location.href && hashElem) {
                for (; hashElem.offsetParent; hashElem = hashElem.offsetParent) {
                    offset += hashElem.offsetTop
                }
            }
            scrollTo(0, offset) history.pushState(null, null, p.url) currentLocationWithoutHash = removeHash(location.href) instantanize()
        }
        var supported = 'pushState' in history
        function init() {
            if (!supported) {
                triggerPageEvent('change') return
            }
            if (currentLocationWithoutHash) {
                return
            }
            for (var i = 0; i < arguments.length; i++) {
                var arg = arguments[i]
                if (arg === true) {
                    useBlacklist = false
                } else if (arg == 'mousedown') {
                    preloadOnMousedown = true
                } else if (typeof arg == 'number') {
                    delayBeforePreload = arg
                }
            }
            currentLocationWithoutHash = removeHash(location.href) pHistory[currentLocationWithoutHash] = {
                body: document.body.outerHTML,
                title: document.title,
                scrollY: pageYOffset
            }
            p.xhr = new XMLHttpRequest() p.xhr.addEventListener('readystatechange', readystatechange) p.url = false p.body = false p.hasBody = true p.title = false p.isPreloading = false p.isWaitingForCompletion = false p.timing = {}
            instantanize(true) addEventListener('popstate', function() {
                var loc = removeHash(location.href) if (loc == currentLocationWithoutHash) {
                    return
                }
                if (!(loc in pHistory)) {
                    location.href = location.href
                    return
                }
                pHistory[currentLocationWithoutHash].scrollY = pageYOffset currentLocationWithoutHash = loc changePage(pHistory[loc].title, pHistory[loc].body) scrollTo(0, pHistory[loc].scrollY) instantanize()
            })
        }
        function on(type, listener) {
            listeners[type].push(listener)
        }
        function debug() {
            return {
                currentLocationWithoutHash: currentLocationWithoutHash,
                p: p,
                pHistory: pHistory,
                supported: supported,
                useBlacklist: useBlacklist
            }
        }
        return {
            supported: supported,
            init: init,
            on: on,
            debug: debug
        }
    }(document, location);

参考自 百度

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论