前端开发图片/背景图延迟加载(lazyload)的实现原理

前端后端分离的开发框架
原生app前端开发框架
web前端 开发框架

html 代码

用法: <img src=”images/默认图片名称.jpg” data-oxlazy=”images/b_5.jpg” alt=”” />
<div class=”evt_floor evt_floor_1″ data-oxlazy=”images/b_12.jpg”></div>

javascript 代码

<script>
    //lazy loading
    ;(function(a) {
        var c = a(window)
        var b = {
            flag: ‘data-oxlazy’,
            init: function() {
                this.items = a.makeArray(a(‘[‘ + this.flag + ‘]’))
                this.cnt = this.items.length
                if (this.cnt === 0) {
                    return false
                }
                c.bind(‘scroll.oxlazy’, function(d) {
                    b.detect()
                }).bind(‘resize.oxlazy’, function(d) {
                    b.detect()
                })
            },
            detect: function() {
                var e = []
                for (var d = 0; d < this.cnt; d++) {
                    if (!b.rock(this.items[d])) {
                        e.push(this.items[d])
                    }
                }
                this.items = e
                this.cnt = this.items.length
            },
            isInView: function(f) {
                var e = a(f),
                    h = e.offset(),
                    g = h.top – c.scrollTop(),
                    d = c.height(),
                    i = -e.height()
                if (g < i || g >= d) {
                    return false
                }
                return e
            },
            rock: function(i) {
                var h = i.getAttribute(this.flag)
                if (!h || h === ”) {
                    return false
                }
                var f = this.isInView(i)
                if (!f) {
                    return false
                }
                var j = i.tagName === ‘IMG’,
                    e = i.tagName === ‘IFRAME’,
                    g = i.getAttribute(this.flag + ‘-timestamp’) === ‘1’,
                    d = g ? ‘?t=’ + this.getTimeStamp() : ”
                h = h + d
                if (j || e) {
                    i.setAttribute(‘src’, h)
                } else {
                    f.css(‘background-image’, ‘url(‘ + h + ‘)’)
                }
                i.removeAttribute(this.flag)
                return true
            },
            getTimeStamp: function() {
                var d = new Date()
                return d.getFullYear() + ” + d.getMonth() + ” + d.getDate()
            },
        }
        a(function() {
            b.init()
            b.detect()
        })
    })(jquery)
</script>
python 前端开发框架
前端开发用的是什么框架
java前端开发框架有哪些

 

» 本文来自:前端开发者 » 《前端开发图片/背景图延迟加载(lazyload)的实现原理》
» 本文链接地址:https://www.rokub.com/7259.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!