前端开发图片/背景图延迟加载(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>

相关内容

html下载阿里云oss文...
html或者react下载阿里云oss文件视频图片
2024-08-04 10:27:02
tortoiseSvn文件...
检查启动项设置 : 如果Tortoise相关的条目图标没有显示,可...
2024-07-26 22:16:04
vsCode npm命令无...
2024-06-30 20:08:50
chrome输入框记住账号...
chrome输入框记住账号密码后背景色改变问题
2024-01-17 17:59:03
网站前端有些页面加载快有些...
网站前端有些页面加载快有些慢或者后端打开快前端打开慢
2023-12-12 14:27:16
layui thinkph...
layui thinkphp表单图片上传upload
2023-12-08 10:54:34

热门资讯

JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...