js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
js不需要知道图片宽高的懒加载方法
懒加载是如何实现的? - 简书
https://www.jianshu.com/p/e86c61468285
找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
dinbror/blazy: Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
https://github.com/dinbror/blazy#demo
这个兼容性比较好
<script type="text/javascript" src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
How to lazyload
Add blazy.js to your website
Add the 'b-lazy' class to the elements that should be lazy loaded
Initialize blazy whenever you're ready
var bLazy = new Blazy({
// Options
});
<img class="b-lazy" data-src="data:image.jpg" />
http://dinbror.dk/blazy/examples/?ref=github#image
注:vuejs,react有对应的懒加载插件
twobin/react-lazyload: Lazy load your component, image or anything matters the performance.
https://github.com/twobin/react-lazyload
vue插件地址:https://github.com/hilongjw/vue-lazyload
demo:http://hilongjw.github.io/vue-lazyload/
js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)的更多相关文章
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作)
SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作) 2012-12-21 未来决定... http://www.ebama.net/thread-107643-1-1.html ...
- Html 之自动高度 auto 和 100%高度
HTML 高度 下面示例 设置为 Auto 和 100% <!DOCTYPE html> <html lang="en"> <head> < ...
- js和php计算图片自适应宽高算法实现
js Code: <script> $width = $(imgobj).width(); //图原始宽 $newheight = $(imgobj).height(); //图原始高 $ ...
- 写个js动态调整图片宽高 (原创)
<body style="TEXT-ALIGN: center;"> <div id="testID" style="backgro ...
- ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题
一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- 转载:JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- JS实现图片宽高的等比缩放
关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...
随机推荐
- AssetManager
AssetManager用于获取assets下的资源. 1.getassets()得到AssetManager 2.AssetManager.close() 关闭AssetManager 3.Reso ...
- tensorflow冻结变量方法(tensorflow freeze variable)
最近由于项目需要,要对tensorflow构造的模型中部分变量冻结,然后继续训练,因此研究了一下tf中冻结变量的方法,目前找到三种,各有优缺点,记录如下: 1.名词解释 冻结变量,指的是在训练模型时, ...
- PHPExcel所遇到问题的知识点总结
工作中进行excel的时候遇到了两个问题, 1.excel表中列值过大,由于没有进行特殊处理,程序没法正常运行: 2.列值中含有日期格式的文本,不能正确读取: 所以通过网络搜索,并解决了问题,记录一下 ...
- word-break和word-wrap的使用和区别
问题起源: 中文是一个字就是一个单词,而英文字母要有一个空格才将他们分割为一个单词:文字换行没事,主要是英文 <!DOCTYPE html> <html> <head&g ...
- PHP合并数组及去重
本文介绍的是一维数组的去重 合并数组的方法 array_merge: 数字键,直接往后添加,key重置 字符串键,后面的数组的值会替代前面的值 +: 数字键,后面的数组的值不会替代前面的值 字符串键, ...
- Oracle课程档案,第十三天
配置可恢复性: ontrol_files:控制文件 parameter:参数 show:显示 select name from v$database; 查看当前的数据库★★ 控制文件SQL> s ...
- Java语言基础之方法的设计
开发遵循原则之一: DRY原则:Don't Repeat Yourself(不要重复你自己的代码) 原因:重复意味着维护成本的增大 public static void main(String[] a ...
- python语法_终止循环_break_continue
break 终止整个循环计算 continue 终止本次循环,continue前的代码执行,continue后的代码不执行,下次循环继续.
- linux --nginx篇
NGINX是什么? nginx是开源的,支持高性能的,高并发的www服务和代理服务软件,就是web服务器,nginx不但是一个优秀的web服务软件,还可以做反向代理,负载均衡,以及缓存服务使用. 优点 ...
- 01day
01 cpu 内存 硬盘 操作系统 CPU:中央处理器,相当于人大脑. (运行速度飞机) 内存:临时存储数据. 8g,16g, (高铁) 1,成本高. 2,断电即消 ...