前端开发图片/背景图延迟加载(lazyload)懒加载
未知
2021-07-24 13:50:01
0
 一个页面的图片多就容易造成加载慢,一个是需要整合图片到一起,减少图片大小及减少http请示次数。另一个就是使用懒加载来实现性能的提升,当滚动到一定高度的时候就预加载将要出现的图片。将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载

<div class="t-b" data-src="/home/qiyefuwu/images/exam-13.jpg">
                <p class="p-o">训练与考试系统<span>独特功能, 超乎预想 ,培训绩效管理的强力助手</span></p>
                <dl class="qrcodeTwo">
                    <sup></sup>
                    <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>

相关内容

探索 PHP sg15 在...
摘要: 本文探讨了PHP的sg15项目在Web开发中的应用,包括...
2026-02-11 01:23:34
PHP sg15 与数据库...
本文介绍了使用PHP与数据库交互的方法,特别是使用sg15框架或库...
2026-02-10 01:23:38
PHP sg15 框架集成...
本文详细介绍了如何将sg15框架集成到PHP项目中,包括准备工作、...
2026-02-10 01:23:36
探索PHP与YAML的互操...
本文探讨了PHP与YAML的互操作性,介绍了YAML的数据格式及P...
2026-02-02 01:23:35
深入理解MySQL视图的工...
摘要: MySQL视图是一种虚拟表,通过封装SQL查询定义。它不...
2026-01-31 01:23:34
MySQL视图与普通表的区...
MySQL视图与普通表:虚拟与实际的存储方式,视图只可查询不可修改...
2026-01-30 01:23:36

热门资讯

downloadable fo... downloadable font: Glyph bbox was incorrect怎么处理
腾讯邮箱qq邮箱使用SMTP开... 第一步:登录 https://mail.qq.com/ 登录后点击设置---账号 第二步:点击【开启...
layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
JavaScript获取当前协... JavaScript获取当前协议,域名,路径
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...