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