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

用法： <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>

<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>