WAP 图片 lazyload
原理是根据屏幕上的坐标找到需要做 lazyload 的区域
1,先监听 scroll 事件
var threshold =
,scrolling_lt
window.addEventListener('scroll', function(){
scrolling_lt = new Date
window.setTimeout(function(){
if (new Date - scrolling_lt < threshold) return
console.log('scroll stop')
getEleToLoad() }, threshold)
} , false)
2 设置扫描线路
var scaneArea = (function(){
var area = []
,w = document.body.clientWidth
,h = document.body.clientHeight
,column =
,space = [Math.round(w / column) , Math.round(h / column)]
for (var i = ; i < column * .; i ++) {
area.push([space[] * i , space[] * i ])
area.push([space[] * i , h - space[] * i ])
area.push([w - space[] * i , space[] * i ])
area.push([w - space[] * i , h - space[] * i ])
} return area
})()
3 获取元素,并显示
function toLoad(imgs){
function loadIt(){
var img = imgs.shift()
if (!img) return
var src = img.getAttribute('asrc')
if (src){
img.removeAttribute('asrc')
img.innerHTML = '<img src='+src+' />'
}
window.setTimeout(loadIt , )
}
loadIt()
}
function getEleToLoad(){
var imgs = []
,d
,findOne = false
scaneArea.forEach(function(pos){
var ele = document.elementFromPoint(pos[] , pos[])
if (!ele || d === ele || ele.dataset.scaned) return
ele.dataset.scaned =
d = ele
if (ele.className.indexOf('lazy') > - ) {
if (findOne)
return imgs.push(ele)
else {
toLoad([ele])
findOne = true
}
}
})
toLoad(imgs)
}
window.setTimeout(getEleToLoad , )
WAP 图片 lazyload的更多相关文章
- wap图片滚动特效_无css3 元素js脚本编写
手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上 ...
- 如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
- vue 图片lazyload
今天看到我一醉哥的一篇朋友圈分享:<不如我们从头来过 | 掘金> 看完之后,百感交集,互联网的浪潮使创业公司如雨后春笋般崛起, 每一个初创公司都会有一群怀着美好愿景的小伙伴, 但是当寒冬来 ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- 移动端图片滚动加载-lazyload实现的要点总结
最近在做移动端的营销页面时,遇到了页面有大量图片的情况,于是很自然的想到了要使用图片lazyload,PC端用着jQuery,也有现成的插件.但是在移动端,基本不用jQuery,于是就试着自己去造一下 ...
- jQuery图片延迟加载插件jquery.lazyload.js
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jquery.lazyload插件实现图片延迟加载
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...
- Web性能优化:图片优化
程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...
- Web前端性能优化之图片优化
我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...
随机推荐
- DPI深度报文检测架构及关键技术实现
DPI深度报文检测架构及关键技术实现 当前DPI(Deep Packet Inspect深度报文识别)技术是安全领域的关键技术点之一,围绕DPI技术衍生出的安全产品类型也非常的多样.在分析DPI的进一 ...
- 升级Xcode8后的相机crash问题-IOS10权限问题
当我升级到Xcode8后,启动我的相机项目,直接crash,输出的日志如下: '2016-07-08 16:41:11.268943 project-name[362:56625] [MC] Syst ...
- Tool-DB:Navicat
ylbtech-Tool-DB:Navicat Navicat是一套快速.可靠并价格相当便宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小企业的 ...
- WebService CXF学习:复杂对象传递(List,Map)
转自:https://blog.csdn.net/z69183787/article/details/35988335 第一步:创建存储复杂对象的类(因为WebServices的复杂对象的传递,一定要 ...
- Vmware 安装虚拟工具 (二)
打开虚拟机,以root超级用户登陆,菜单栏选择虚拟机,install安装虚拟机 拷贝虚拟工具到 在根目录下建立文件夹,并将工具拷贝到该文件夹,例如vmtool 打开终端,进入该目录开始安装 如图,进入 ...
- Selenium键盘鼠标操作总结
鼠标操作 org.openqa.selenium.interactions.Actions 1.给元素设置焦点. 有时对于a标签等,为了不跳转到别的链接,但是需要设置焦点时就可使用. action.m ...
- Oracle 复合索引设计原理——前缀性和可选性
前缀性: 复合索引的前缀性是指只有当复合索引的第一个字段出现在SQL语句的谓词条件中时,该索引才会被用到.如复合索引为(ename,job,mgr),只要谓词条件中出现第一个字段ename,就可以用复 ...
- 浅谈javascript的面向对象思想
面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...
- 移除HTML5 input在type="search"时的清除按钮
input[type="search"]::-webkit-search-cancel-button { display: none; }
- codeforces 567 E. President and Roads 【 最短路 桥 】
给出一个有向图,从起点走到终点(必须走最短路),问一条边是否一定会被经过,如果不经过它,可以减小它的多少边权使得经过它(边权不能减少到0) 正反向建图,分别求出起点到每个点的最短距离,终点到每个点的最 ...