常见小效果之懒加载
来源：互联网 发布：算法分析与设计 王晓东 编辑：程序博客网 时间：2024/05/22 02:24
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} ul,li{list-style: none;} img{width: 100%;height: 160px;/* 以下样式是为了做渐变效果 */opacity: 0;transition: opacity 2s;} img[src]{opacity: 1;} </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script type="text/javascript"> /* * 图片懒加载的思路 * 1、提前给所有图片设置宽和高用来占位 * 2、不设置图片的src属性，而是自定义一个data-src属性来存储图片的路径 * 3、判断当前屏幕的位置（图片的top值和屏幕底部的值），来进行是否显示 * 图片，如果需要显示的话，把data-src的值给src */ var imgs = document.querySelectorAll("img"); //获取所有图片 window.onscroll = lazyloadFn;//设置滚动事件 var sh = window.innerHeight; //屏幕的高度 console.log(sh); lazyloadFn(); //刚进来需要先调用下 function lazyloadFn () {//图片懒加载的方法 var st = document.body.scrollTop;//获取滚动的距离 var sn = sh + st;//计算滚动中的底部的值 for (var i = 0; i < imgs.length; i++) { //循环所有的图片 if (imgs[i].offsetTop <= sn) { imgs[i].src = imgs[i].getAttribute("data-src"); } } } </script> </body> </html> 0 0
- 常见小效果之懒加载
- IOS疯狂基础之常见小效果
- 常见小错误之括号
- 小程序之加载动画
- 常见功能--下拉刷新、上拉加载更多效果实现
- 小程序之『图片懒加载』终极解决方案
- 模块加载常见之错误及策略
- Android之自定义view-加载效果
- Android 自定义View之加载进度条效果
- 常用前端效果之页面加载
- 懒加载效果的实现
- android 幻灯片效果之小方块渐入渐出
- JavaScript小练习效果之多级菜单
- Android之霓虹灯实现小效果
- IOS开发之UITableView小效果（禁止弹性效果）
- android之自定义webView之头部进度加载效果
- 懒加载总结小收集
- fragment懒加载小总结
- Activity C中关闭Activity A的方法
- 第一篇博客
- MySQL
- 转 A 、B两张表，找出ID字段中，存在A表，但是不存在B表的数据
- C++ 字符串分割
- 常见小效果之懒加载
- 图片上传的设置
- Hibernate：命名SQL查询
- iOS WebView与Native交互
- Rocketmq整体分析
- PhotoShop 快捷键看我就够了
- 自定义ImageView
- 揭秘--组件的概念及应用
- explode
