基于原生js的图片延迟加载

当页面图片比较多的时候，我们通常会做一个延迟加载，避免页面打开时一下子的请求数太多，加载过慢影响用户体验。

如果项目用了jquery框架，则可以直接用 jquery.lazyload.可在jquery官网下载到。

如果项目是基于原生js的，可以参考以下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>lazyload class</title><style>img{width:auto; height:300px;}</style>
</head>
<body><h1>测试图片延迟加载效果</h1><p><img data-url="images/p1.jpg" src="data:images/grey.gif" alt="p1"></p><p><img data-url="images/p2.jpg" src="data:images/grey.gif" alt="p2"></p><p><img data-url="images/p3.jpg" src="data:images/grey.gif" alt="p3"></p><p><img data-url="images/p4.jpg" src="data:images/grey.gif" alt="p4"></p><p><img data-url="images/p5.jpg" src="data:images/grey.gif" alt="p5"></p><p><img data-url="images/p6.jpg" src="data:images/grey.gif" alt="p6"></p><script>var API = {on : function(ele, ev, handler){ele.addEventListener ? ele.addEventListener(ev, handler) : ele.attachEvent('on' + ev, handler);return ele;},bind: function(obj, handler){return function(){ handler.apply(obj,arguments); }},pageX: function(ele){var left = 0;do{left += ele.offsetLeft;}while(ele.offsetParent && (ele = ele.offsetParent).className.toLowerCase() !=='body');return left;},pageY: function(ele){var top = 0;do{top += ele.offsetTop;}while(ele.offsetParent && (ele = ele.offsetParent).className.toLowerCase() !=='body');return top;},hasClass: function(ele,cls){return new RegExp('^|\\s' + cls + '\\s|$').test(ele.className);},attr: function(ele,attr,val){if(val===undefined){return ele.getAttribute(attr);}else{return ele.setAttribute(attr, val);}}};function Lazyload(id, diff, attr){this.container = typeof id === 'string' ? document.getElementById(id) : document.body;this.imgs = [].slice.call(this.container.getElementsByTagName('img'));this.diff = diff || 0;this.attr = attr || "data-url";this.load();//尝试加载正处在视窗中的图片this.spyScroll();}Lazyload.prototype = {constructor: Lazyload,spyScroll: function(){API.on(window, 'scroll', API.bind(this, this.load) );},load: function(){if(!this.imgs.length) return; //all image loadedvar pos,url,imgs = this.imgs.slice();//copy the arrayvar c=0;for(var i = 0, len = imgs.length; i < len; i++){pos = this.pos2viewport(imgs[i]); if(pos === 'above' || pos === 'in'){ //console.log(imgs[i],pos,i,'      imgs.length=',len);
                  url = API.attr(imgs[i], this.attr); API.attr(imgs[i], 'src',url);API.on(imgs[i], 'load', function(){this.style.width='auto';//图片加载后 采用图片真实尺寸this.style.height = 'auto';});this.imgs.splice(i-c,1); c++;//保持两数组元素的对应关系
              }}},pos2viewport:function(img){//img's position relative to viewport. above, in , belowvar imgScrollTop = API.pageY(img), diff = this.diff,rangeT = imgScrollTop - diff,rangeB = imgScrollTop + img.clientHeight + diff,viewportT = document.documentElement.scrollTop || document.body.scrollTop,viewportB = viewportT + document.documentElement.clientHeight;var pos = '';viewportT >= rangeB && (pos = 'above');viewportB <= rangeT && (pos = 'below');!pos && (pos = 'in');return pos;}};var lazy =  new Lazyload(document.body, 50);</script>
</body>
</html>

基于原生js的图片延迟加载相关推荐

如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...

基于原生js的图片延迟加载

基于原生js的图片延迟加载相关推荐

最新文章

热门文章