前端开发提升用户体验；图片懒加载(lazyload)

前端开发教程百度云

传智播客的前端开发视频教程下载

前端开发高级教程

懒加载的意义（为什么要使用懒加载）

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

###原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注：图片要指定宽高

html 代码

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

###代码

在写代码前，需要了解各种高度。主要了解scrollTop,offsetTop,scrollLeft,offsetLeft

html 代码

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

img {

display: block;

margin-bottom: 50px;

width: 400px;

height: 400px;

}

</style>

</head>

<body>

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

<img

src=”default.jpg”

data-src=”http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg”

alt=””

</body>

</html>

javascript写法

javascript 代码

var num = document.getElementsByTagName(‘img’).length

var img = document.getElementsByTagName(‘img’)

var n = 0 //存储图片加载到的位置，避免每次都从第一张图片开始遍历

lazyload() //页面载入完毕加载可是区域内的图片

window.onscroll = lazyload

function lazyload() {

//监听页面滚动事件

var seeHeight = document.documentElement.clientHeight //可见区域高度

var scrollTop =

document.documentElement.scrollTop ||

document.body.scrollTop //滚动条距离顶部高度

for (var i = n; i < num; i++) {

if (img[i].offsetTop < seeHeight + scrollTop) {

if (img[i].getAttribute(‘src’) == ‘default.jpg’) {

img[i].src = img[i].getAttribute(‘data-src’)

}

n = i + 1

}

</script>

jquery写法

javascript 代码

var n = 0,

imgNum = $(‘img’).length,

img = $(‘img’)

lazyload()

$(window).scroll(lazyload)

function lazyload(event) {

for (var i = n; i < imgNum; i++) {

if (

img.eq(i).offset().top <

parseInt($(window).height()) +

parseInt($(window).scrollTop())

) {

if (img.eq(i).attr(‘src’) == ‘default.jpg’) {

var src = img.eq(i).attr(‘data-src’)

img.eq(i).attr(‘src’, src)

n = i + 1

}

</script>

###使用节流函数进行性能优化

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。

我想实现限制触发频率，来优化性能。

节流函数：只允许一个函数在N秒内执行一次。下面是一个简单的节流函数：

javascript 代码

// 简单的节流函数

//fun 要执行的函数

//delay 延迟

//time 在time时间内必须执行一次

function throttle(fun, delay, time) {

var timeout,

startTime = new Date()

return function() {

var context = this,

args = arguments,

curTime = new Date()

clearTimeout(timeout)

// 如果达到了规定的触发时间间隔，触发 handler

if (curTime – startTime >= time) {

fun.apply(context, args)

startTime = curTime

// 没达到触发间隔，重新设定定时器

} else {

timeout = setTimeout(fun, delay)

}

// 实际想绑定在 scroll 事件上的 handler

function lazyload(event) {}

// 采用了节流函数

window.addEventListener(‘scroll’, throttle(lazyload, 500, 1000))

前端开发实战教程视频教程

前端开发2017教程

htmlweb前端开发教程

前端开发提升用户体验；图片懒加载(lazyload)

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发