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%,也就是说超过 ...
随机推荐
- 自己动手写CPU之第七阶段(6)——乘累加指令实现思路
将陆续上传本人写的新书<自己动手写CPU>.今天是第29篇.我尽量每周四篇 亚马逊的销售地址例如以下,欢迎大家围观呵! http://www.amazon.cn/dp/b00mqkrlg8 ...
- Light OJ 1288 Subsets Forming Perfect Squares 高斯消元求矩阵的秩
题目来源:Light OJ 1288 Subsets Forming Perfect Squares 题意:给你n个数 选出一些数 他们的乘积是全然平方数 求有多少种方案 思路:每一个数分解因子 每隔 ...
- hdu(2846)Repository
Problem Description When you go shopping, you can search in repository for avalible merchandises by ...
- 精美viso制图(1)
office组件中的viso是一款十分强大的绘图工具,在绘制流程图.结构框图时显得十分方便,这里将我自己绘制的一些viso图(大部分都是用在我自己的论文中的)与大家分享一把. 1.深度学习训练流程图 ...
- UVA - 11722 Joining with Friend 几何概率
Joining with Friend You are going from Dhaka to Chittagong by train and you ...
- 由GPS坐标计算半径
在实际应用当中,一般是通过一个个体的编码来查找该编码对应的地区中心的经纬度,然后再根据这些经纬度来计算彼此的距离,从而估算出某些群体之间的大致距离范围(比如酒店旅客的分布范围-各个旅客的邮政编码对应的 ...
- JavaScript中闭包的理解
1.什么是闭包 我个人理解闭包就是函数中嵌套函数,但是嵌套的那个函数必须是返回值,才构成闭包: <!DOCTYPE html> <html> <head> < ...
- navigate系列api
wx.navigateTo 用于保留当前页面.跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面.对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳 ...
- javascript: 基于原型的面向对象编程
Douglas Crockford指出javascript是世界上最被误解的编程语言.由于javascript缺少常见的面向对象概念,许多程序猿认为javascript不是一个合适的语言.我在做第一个 ...
- 关于css3背景图片渐变的规则
1. Webkit引擎的CSS3径向渐变语法 Webkit引擎下的老版本语法:-webkit-gradient([<type>],[<position> || & ...