一个页面的图片多就容易造成加载慢，一个是需要整合图片到一起，减少图片大小及减少http请示次数。另一个就是使用懒加载来实现性能的提升，当滚动到一定高度的时候就预加载将要出现的图片。将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载

<div class="t-b" data-src="/home/qiyefuwu/images/exam-13.jpg">
                <p class="p-o">训练与考试系统<span>独特功能， 超乎预想 ，培训绩效管理的强力助手</span></p>
                <dl class="qrcodeTwo">
                    
                    <dt><img class="img-item" alt="loading" data-src="/home/qiyefuwu/picture/peixun.png"></dt>
                    <dd>扫码立即免费体验</dd>
                </dl>
         
            </div>
<script type="text/javascript">
        $(function(a) {
            var c = a(window)
            var b = {
                flag: 'data-src',
                init: function() {
                    this.items = a.makeArray(a('[' + this.flag + ']'))
                    this.cnt = this.items.length
                    if (this.cnt === 0) {
                        return false
                    }
                    c.bind('scroll.src', function(d) {
                        b.detect()
                    }).bind('resize.src', 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()
            })
        })
    </script>

标签：