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实现图片宽高的等比缩放
关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...
随机推荐
- Ubuntu下pdf和图片互转
前边文章可以将ppt转换为pdf 查看 使用unoconv将ppt转为pdf,再使用imagemagick将pdf转为图片 这次想将pdf和图片进行互转 当前目录下只有2.ppt 1.ppt转pdf ...
- adb命令集锦
adb 是什么? adb工具即Android Debug Bridge(安卓调试桥) tools.它就是一个命令行窗口,用于电脑端与模拟器或者真实设备交互. 常用操作: 把文件发送到android设备 ...
- 解决FAT32格式U盘安装win10时0x8007000D错误
问题由来 我一直使用U盘,UltraISO软碟通和msdn原版镜像来装系统.最近在把Win10 1709升级为1803时遇到了问题.同样也是使用UltraISO刻录镜像到U盘的方法安装的,这次从U盘启 ...
- 11.9luffycity(4)
2018-11-9 17:57:09 明天开始自己独立写luffy部分表的接口, 越努力,越幸运!永远不要高估自己! 明天后天先不想下看视频,把接口做完,然后整理一下笔记,温故而习之,可以为师啊! 知 ...
- 计算属性和监听,computed,watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- dubbo控制器xml文件报错
在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: Multiple annotations found at th ...
- 实际体验Span<T> 的惊人表现
前言 最近做了一个过滤代码块功能的接口.就是获取一些博客文章做文本处理,然后这些博客文章的代码块太多了,很多重复的代码关键词如果被拿过来处理,那么会对文本的特征表示已经特征选择会有很大的影响.所以需要 ...
- php 延迟静态绑定: static关键字
abstract class DomainObject { public static function create() { return new self(); } } class User ex ...
- day21:包和异常处理
1,复习 # 序列化模块 # json # dumps # loads # dump 和文件有关 # load load不能load多次 # pickle # 方法和json的一样 # dump和lo ...
- springboot 2.0部署到Tomat8.5上
1.改jar为war 2.改下打包的名字 3.删掉tomcat的webapps下面的所有文件夹.将打好的jar包放入到webapps下 4.运行tomcat,双击shutdown.bat 注意: sp ...