echo图片延迟加载js
兼容性
Echo.js 使用了 HTML5 的 date 属性,并且需要获取该属性的值,所以它并不兼容 IE6、IE7。虽然 Lazy Load 也使用了 HTML5 的 date 属性,但它获取值的方法不一样。
使用方法
1、引入文件
|
1
|
<script src="js/echo.min.js"></script> |
2、HTML
|
1
|
<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480"> |
blank.gif 是一个 1 x 1 的图片,用做默认图片,data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度,或者在 CSS 中设置也可以,否则似乎很底部很底部的图片才会延迟加载。
3、JavaScript,懒加载初始化,注意:每次使用懒加载之后都要在dom准备完成之后初始化调用一次
|
1
2
3
4
|
Echo.init({ offset: 0, throttle: 0}); |
参数
| 参数 | 说明 |
|---|---|
| offset | 离可视区域多少像素的图片可以被加载 |
| throttle | 图片延迟多少毫秒加载 |
演示:http://www.jq22.com/yanshi660
echo图片延迟加载js的更多相关文章
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
- js图片延迟加载
什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
- 基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
- jquery.lazyload.js 图片延迟加载
当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
随机推荐
- hdu 3415 Max Sum of Max-K-sub-sequence 单调队列。
Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- hdu 1159(DP+字符串最长公共序列)
http://blog.csdn.net/a_eagle/article/details/7213236 公共序列可以用一个二维数组dp[i][j]保存每个点时的最大数字,本质就是一个双向比较. dp ...
- js-js的不重载
* 什么是重载?方法名相同,参数列表不同 - Java里面有重载 * js里面不存在重载! <html> <head> <title>World</title ...
- C++ 线程学习
原文:http://blog.csdn.net/wzy_1988/article/details/46562921 线程的概念 C++中的线程的Text Segment和Data Segment都是共 ...
- Android Tab与TabHost
这就是Tab,而盛放Tab的容器就是TabHost 如何实现?? 每一个Tab还对应了一个布局,这个就有点好玩了.一个Activity,对应了多个功能布局. ①新建一个Tab项目,注意,不要生成mai ...
- npdp
我报名比较晚,等缴费最后期限,才缴费,下定决心,开始正式的备考. 我的工作比较忙,备考时间特比较短,从拿到书到考试只有一个月了,心理慌慌的. 在岳老师的帮助下,完成了报名资格申请.拿到备考计划,就赶紧 ...
- String,StringBuffer和StringBuilder三者的讲解
对于java的学习者而言,无论是初学者,还是java大师,String对于大家而言,也绝对不会陌生.下面本人就从 自己学习的角度大致分析一下String,StringBuffer和StringBui ...
- python数据处理与机器学习
提纲 numpy: #genformtxt import numpy as np #genformtxtdata=np.genfromtxt("genfromtxtdata") # ...
- 没有对比就没有伤害,memcache and redis
Memcached 与 Redis 的关键性能指标比较 性能对比: Redis 只使用单核,而 Memcached 可以使用多核,所以平均每一个核上 Redis在存储小数据时比 Memcached 性 ...
- Oracle案例09——ORA-12154: TNS:could not resolve the connect identifier specified
DG处理的问题还是蛮多的,但这次遇到一个比较奇葩的事情,表面配置.网络都没啥问题,但主备的同步始终有问题,经过多次调整参数.重新部署问题依旧,最终还是求助mos问题得以解决,现将处理过程记录如下: 一 ...