原理是根据屏幕上的坐标找到需要做 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的更多相关文章

  1. wap图片滚动特效_无css3 元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上 ...

  2. 如何在小程序实现图片lazy-load懒加载效果

    自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...

  3. vue 图片lazyload

    今天看到我一醉哥的一篇朋友圈分享:<不如我们从头来过 | 掘金> 看完之后,百感交集,互联网的浪潮使创业公司如雨后春笋般崛起, 每一个初创公司都会有一群怀着美好愿景的小伙伴, 但是当寒冬来 ...

  4. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  5. 移动端图片滚动加载-lazyload实现的要点总结

    最近在做移动端的营销页面时,遇到了页面有大量图片的情况,于是很自然的想到了要使用图片lazyload,PC端用着jQuery,也有现成的插件.但是在移动端,基本不用jQuery,于是就试着自己去造一下 ...

  6. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  7. jquery.lazyload插件实现图片延迟加载

    jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...

  8. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  9. Web前端性能优化之图片优化

    我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...

随机推荐

  1. 字节与字符_字节流与字符流_ASCII与Unicode_GB2312_GBK_GB18030_BIG-5

    字节(Byte):通常将可表示经常使用英文字符8位二进制称为一字节. 一个英文字母(不分大写和小写)占一个字节的空间,一个中文汉字占两个字节的空间. 符号:英文标点2占一个字节,中文标点占两个字节. ...

  2. UI各种小控件的用法

    今天给大家列举出来UI中的一些小控件的用法.方便大的学习与使用 一些方法和属性我们能够查看API文档.不必将每一个控件的功能都记住, 由于在使用的过程中,我们能够查看API文档.方便使用,我们仅仅要记 ...

  3. angularjs1-路由

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. java应用集锦9:httpclient4.2.2的几个常用方法,登录之后访问页面问题,下载文件

    转账注明出处:http://renjie120.iteye.com/blog/1727933 在工作中要用到android,然后进行网络请求的时候,打算使用httpClient. 总结一下httpCl ...

  5. 20.QT文本文件读写

    #include "mainwindow.h" #include "ui_mainwindow.h" #include <QFile> #inclu ...

  6. C#中网络通信

    一.服务端代码 using System; using System.Collections.Generic; using System.Linq; using System.Net; using S ...

  7. git工具的安装和使用

    啰嗦几句: 世界上本没有后悔药,但软件开发提供了后悔药,那就是代码管理工具.它可以让你的代码穿越回以前的状态,甚至可以指定某一个时刻,而且还可以穿越回来. 当下流行的代码管理工具有 SVN 和 GIT ...

  8. 不懂技术也可以轻松开发一款APP

    这是个衣食住行都离不开手机的时代,甚至可以说,我们不用考虑其他的东西,只要拿着手机,就可以出门做自己想做的事情. 这就是手机app的强大之处,覆盖面极广,小到聊天交友,大到投资理财.每次都是app为我 ...

  9. Java数据库开发

    Nosql数据库使用场景 首先需要确认一个问题,nosql能做什么?在现在的开发领域中nosql可以实现文档存储(BSON.JSON).缓存存储.图像缓存(图像搜索),但是对于nosql的具体应用场景 ...

  10. 问题请教:关于同一个POD中多容器的广播信息问题

    广大博友好,最近在K8S集群中遇到一个问题,贴出来同大家分享一下 同一个POD中多个容器 如何处理广播信息? 经测试 同一个POD中当先启动的容器占用广播端口后,其他的容器启动就会报bind erro ...