JS里面的懒加载(lazyload)

　　懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载

　　涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源，让用户等待太久，

　　来，举个栗子，当你去东哥的绿帽网网购的时候，打开首页的时候，直接在导航栏选了商品种类跳转到了列表页，那首页下方那些未显示的区域的图片需不需要加载，当然不需要了，你根本没看他们，加载出来干啥

　　说白了就是占着茅坑不拉粑粑，那我们怎么解决呢，这时我们就该用到懒加载技术，只有当这部分图片出现在可视区内再去请求服务器。

　　懒加载的核心：在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)

　　下面来一个大栗子

　　来，把朕的代码例子呈上来

　　例子的思路：页面渲染时将src路径放到自定义属性中去，这样页面加载时图片就不会去请求服务器，当图片滚动到可视区内时，获取它的自定义属性并赋值给src

　　这是页面的布局，图片路径注意改一下子

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}img{width:200px;height:200px;display:block;float:left;}</style>
</head>
<body><imgsrc=""data-url="img/1.jpg"><imgsrc=""data-url="img/2.jpg"><imgsrc=""data-url="img/3.jpg"><imgsrc=""data-url="img/4.jpg"><imgsrc=""data-url="img/5.jpg"><imgsrc=""data-url="img/6.jpg"><imgsrc=""data-url="img/7.jpg"><imgsrc=""data-url="img/8.jpg"><imgsrc=""data-url="img/9.jpg"><imgsrc=""data-url="img/10.jpg"><imgsrc=""data-url="img/1.jpg"><imgsrc=""data-url="img/2.jpg"><imgsrc=""data-url="img/3.jpg"><imgsrc=""data-url="img/4.jpg"><imgsrc=""data-url="img/5.jpg"><imgsrc=""data-url="img/6.jpg"><imgsrc=""data-url="img/7.jpg"><imgsrc=""data-url="img/8.jpg"><imgsrc=""data-url="img/9.jpg"><imgsrc=""data-url="img/10.jpg"><imgsrc=""data-url="img/1.jpg"><imgsrc=""data-url="img/2.jpg"><imgsrc=""data-url="img/3.jpg"><imgsrc=""data-url="img/4.jpg"><imgsrc=""data-url="img/5.jpg"><imgsrc=""data-url="img/6.jpg"><imgsrc=""data-url="img/7.jpg"><imgsrc=""data-url="img/8.jpg"><imgsrc=""data-url="img/9.jpg"><imgsrc=""data-url="img/10.jpg"><imgsrc=""data-url="img/1.jpg"><imgsrc=""data-url="img/2.jpg"><imgsrc=""data-url="img/3.jpg"><imgsrc=""data-url="img/4.jpg"><imgsrc=""data-url="img/5.jpg"><imgsrc=""data-url="img/6.jpg"><imgsrc=""data-url="img/7.jpg"><imgsrc=""data-url="img/8.jpg"><imgsrc=""data-url="img/9.jpg"><imgsrc=""data-url="img/10.jpg">

　　来上关键的JS代码

<script>//页面加载时先调用一次loadImg函数
loadImg()//添加滚动事件window.onscroll = function() {loadImg()}functionloadImg() {var iH =document.documentElement.clientHeight;var t = document.documentElement.scrollTop ||document.body.scrollTop;var img = document.getElementsByTagName("img");for (var i = 0; i < img.length; i  ) {if ((!img[i].bstop) && offsetTop1(img[i]) < (iH  t)) {//注意  真正在页面上使用一定要加开关,不加开关每次条件符合时都会重新请求服务器，还不如不用懒加载//理解不了啥意思的同学，可以把img[i].bstop删去试试//同时不要用offsetTop//因为offsetTop是获取离已定位的父元素的top值//所以自己封装一个计算offsetTop的函数var src = img[i].getAttribute("data-url");img[i].src=src;img[i].bstop= true;console.log(1)}}}//封装获取元素离上方的高度的函数functionoffsetTop1(obj) {var t =obj.offsetTop;while(obj.offsetparent) {obj=obj.offsetparent;t= t  obj.offsetTop;}returnt;}</script>

更多专业前端知识，请上【猿2048】www.mk2048.com

JS里面的懒加载(lazyload)相关推荐

JS实现图片懒加载效果
文章目录前言一.图片实现懒加载步骤二.案例练习(三国女将) 1. html 代码 2. css 代码 3. js 代码执行结果前言懒加载时一种也页面效果,可以提高页面加载速率,并降低服务器 ...
js实现图片懒加载原理（marksheng）
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
js实现图片懒加载原理
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
vue打开html自动加载js,vue.js怎么实现懒加载
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现懒加载的方法: 一.为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异 ...
图片懒加载 lazyload
目录了解代码效果了解图片懒加载是一种网页性能优化的方法,能够极大的提升用户的体验效果,现代一张图片都有可能是几兆的问题,加入100张图片你进入页面难道就直接全部请求,这得要多卡,所以使用图片 ...
图片懒加载——lazyload
vue-lazyload - npm 上面链接为官方指导 1.安装vue2所兼容的版本 npm i vue-lazyload 2.在main.js中引入插件和图片 // 引入懒加载插件,引入图片 im ...
JS实现图片懒加载的几种简单方式，图片懒加载
记得以前手机端有个业务时将用户上传的的图片在用户往上滑动手机的时候呈现,由于刚开始用户数量少就没留意,直接将后台的数据拉过来渲染,当时后台也没有分页,可是后来参与用户多了起来,跳转到这个页面就渲染个几 ...
图片懒加载(lazyload)的几种方式
背景当页面中有很多图片时,全部加载需要很多时间,而且会消耗很多渲染资源,为了解决这个问题,加强用户体验,我们先将看得到的区域中的图片加载,也就是可视化区域加载,剩余部分等之后再加载. 原理 ...

JS里面的懒加载(lazyload)

JS里面的懒加载(lazyload)相关推荐

最新文章

热门文章