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. linux可执行文件添加到PATH环境变量的方法

    linux命令行下面执行某个命令的时候,首先保证该命令是否存在,若存在,但输入命令的时候若仍提示:command not found 这个时候就的查看PATH环境变量的设置了,当前命令是否存在于PAT ...

  2. Windows10 + IntelliJ IDEA 2017.3.2 + wamp2e + xdebug 调试 配置

    一.环境 系统: windows10 WampServer:  wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-32b.exe IDE:  Intel ...

  3. 【netcore基础】.Net core通过 Lucene.Net 和 jieba.NET 处理分词搜索功能

    业务要求是对商品标题可以进行模糊搜索 例如用户输入了[我想查询下雅思托福考试],这里我们需要先将这句话分词成[查询][雅思][托福][考试],然后搜索包含相关词汇的商品. 思路如下 首先我们需要把数据 ...

  4. A real example of vioplot in R (sample data and code attached)

    Basic information Package name: vioplot Package homepage: https://cran.r-project.org/web/packages/vi ...

  5. 【Static Program Analysis - Chapter 3】Type Analysis

    类型分析,个人理解就是(通过静态分析技术)分析出代码中,哪些地方只能是某种或某几种数据类型,这是一种约束.   例如,给定一个程序: 其中,我们可以很直接地得到一些约束: 最后,经过简化可以得到: 对 ...

  6. python之刷博客访问量

    通过写刷访问量学习正则匹配 说明信息 说明:仅仅是为了熟悉正则表达式以及网页结构,并不赞成刷访问量操作. 1.刷访问量第一版 1.1 确定网页url结构,构造匹配模式串 首先是要确定刷的网页.第一版实 ...

  7. kaggle竞赛-保险转化-homesite

    时间格式的转化 查看数据类型 查看DataFrame的详细信息 填充缺失值 category 数据类型转化 模型参数设定 结论 该项目是针对kaggle中的homesite进行的算法预测,使用xgbo ...

  8. codeforces 1106 E

    显然是dp啊,dp[i][j]表示到时间i打扰了j次的最小收益 显然要排序,官方题解说set没看懂,优先队列就行啊. 按照时间排序,显然这样扫的话可以保证当前时间点的点在优先队列里吧, 然后有打断和不 ...

  9. pytorch入门与实践-2.2-CIFAR10分类网络

    1--数据载入 |----流程: DataSet->DataLoader->调用DataLoader |----DataLoader迭代器读不到数据,无报错,一直卡住的显现: DataLo ...

  10. lsass.exe占用cpu 解决方法

    最终解决办法如下: RD /s /q "%USERPROFILE%\AppData\Roaming\Microsoft\Protect"