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)的更多相关文章

  1. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作)

    SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作) 2012-12-21  未来决定...       http://www.ebama.net/thread-107643-1-1.html ...

  3. Html 之自动高度 auto 和 100%高度

    HTML 高度 下面示例 设置为 Auto 和 100% <!DOCTYPE html> <html lang="en"> <head> < ...

  4. js和php计算图片自适应宽高算法实现

    js Code: <script> $width = $(imgobj).width(); //图原始宽 $newheight = $(imgobj).height(); //图原始高 $ ...

  5. 写个js动态调整图片宽高 (原创)

    <body style="TEXT-ALIGN: center;"> <div id="testID" style="backgro ...

  6. ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题

    一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...

  7. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  8. 转载:JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  9. JS实现图片宽高的等比缩放

    关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...

随机推荐

  1. AssetManager

    AssetManager用于获取assets下的资源. 1.getassets()得到AssetManager 2.AssetManager.close() 关闭AssetManager 3.Reso ...

  2. tensorflow冻结变量方法(tensorflow freeze variable)

    最近由于项目需要,要对tensorflow构造的模型中部分变量冻结,然后继续训练,因此研究了一下tf中冻结变量的方法,目前找到三种,各有优缺点,记录如下: 1.名词解释 冻结变量,指的是在训练模型时, ...

  3. PHPExcel所遇到问题的知识点总结

    工作中进行excel的时候遇到了两个问题, 1.excel表中列值过大,由于没有进行特殊处理,程序没法正常运行: 2.列值中含有日期格式的文本,不能正确读取: 所以通过网络搜索,并解决了问题,记录一下 ...

  4. word-break和word-wrap的使用和区别

    问题起源: 中文是一个字就是一个单词,而英文字母要有一个空格才将他们分割为一个单词:文字换行没事,主要是英文 <!DOCTYPE html> <html> <head&g ...

  5. PHP合并数组及去重

    本文介绍的是一维数组的去重 合并数组的方法 array_merge: 数字键,直接往后添加,key重置 字符串键,后面的数组的值会替代前面的值 +: 数字键,后面的数组的值不会替代前面的值 字符串键, ...

  6. Oracle课程档案,第十三天

    配置可恢复性: ontrol_files:控制文件 parameter:参数 show:显示 select name from v$database; 查看当前的数据库★★ 控制文件SQL> s ...

  7. Java语言基础之方法的设计

    开发遵循原则之一: DRY原则:Don't Repeat Yourself(不要重复你自己的代码) 原因:重复意味着维护成本的增大 public static void main(String[] a ...

  8. python语法_终止循环_break_continue

    break 终止整个循环计算 continue 终止本次循环,continue前的代码执行,continue后的代码不执行,下次循环继续.

  9. linux --nginx篇

    NGINX是什么? nginx是开源的,支持高性能的,高并发的www服务和代理服务软件,就是web服务器,nginx不但是一个优秀的web服务软件,还可以做反向代理,负载均衡,以及缓存服务使用. 优点 ...

  10. 01day

    01 cpu 内存 硬盘 操作系统  CPU:中央处理器,相当于人大脑.   (运行速度飞机)   内存:临时存储数据. 8g,16g,          (高铁)   1,成本高.   2,断电即消 ...