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的调用方法因为有网友爆出的 ...
随机推荐
- ‘Starting Tomcat v9.0 Server at localhost’ has encountered a problem.
上述错误是在将Web应用部署到Tomcat,最后一步 右键单击选择Start的时候报错,原因是我在启动Tomcat之前,就已经运行了Tomcat,导致端口被占用.将之前的Tomcat关闭重新启动就可以 ...
- python中单下划线和双下滑线
使用单下划线(_one_underline)开头表示方法不是API的一部分,不要直接访问(虽然语法上访问也没有什么问题). 使用双下划线开头(__two_underlines)开头表示子类不能覆写该方 ...
- UOJ#55 [WC2014]紫荆花之恋
题目描述 强强和萌萌是一对好朋友.有一天他们在外面闲逛,突然看到前方有一棵紫荆树.这已经是紫荆花飞舞的季节了,无数的花瓣以肉眼可见的速度从紫荆树上长了出来. 仔细看看的话,这个大树实际上是一个带权树. ...
- Bootstrap学习笔记(排版)
bootstrap简介: ☑ 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑ 基于html5.css3的bootstrap,具有大量的诱人特性:友好 ...
- DOM操作表单(select下拉选框)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Python - Exceptions
官方文档:https://docs.python.org/3/library/exceptions.html 1. 使用try...except... 2. 输出错误信息的方式为: try: curs ...
- 毕向东_Java基础视频教程第20天_IO流(7~10)
第20天-07-IO流(递归) package bxd; import java.io.File; public class FileDemo3 { // 非递归打印 public static vo ...
- 分布式服务框架dubbo原理解析
alibaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.这个框架/工具/产 ...
- MVC框架以及实例(补充)
此文是MVC框架以及实例(http://www.cnblogs.com/justmaomao/p/6739065.html)的补充部分 以下简单介绍简单登录的相关内容 1)在login.jsp中待提交 ...
- iOS设计模式 - 外观
iOS设计模式 - 外观 原理图 说明 1. 当客服端需要使用一个复杂的子系统(子系统之间关系错综复杂),但又不想和他们扯上关系时,我们需要单独的写出一个类来与子系统交互,隔离客户端与子系统之间的联系 ...