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的调用方法因为有网友爆出的 ...
随机推荐
- [LeetCode]Combination Sum题解(DFS)
Combination Sum Given a set of candidate numbers (C) (without duplicates) and a target number (T), f ...
- HTTP 错误500.19 - 错误代码 0x80070021
1.错误描述 HTTP 错误500.19 -Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详细错误信息 模块 IIS Web Core 通知 Begi ...
- Windows任务计划向远程服务器拷贝文件,报登录失败: 未知的用户名或错误密码
问题产生很奇怪,当你登录到系统时,执行自动化作业是正常 但到了晚上凌晨自动执行作业时,则报登录失败: 未知的用户名或错误密码 解决方案: 在拷贝脚本中加及一行,创建net use 命名,每次文件拷贝前 ...
- Catalan数的通项公式(母函数推导)
首先 \[h_n=\sum_{i}h_ih_{n-i-1}\] 写出 \(h\) 的母函数 \(H(x)\) 那么 \[H(x)=H^2(x)x+1,H(x)=\frac{1-\sqrt{1-4x}} ...
- redux、immutablejs和mobx性能对比(二)
三.分析数据 1.前提说明 我对测试出的10个数据摘除最大值与最小值,然后求平均值 根据平均值我绘制了一个曲线图一个柱状图 曲线图用于查看1000-100000的性能趋势 柱状图用于比较在相同条数下r ...
- Vue.js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
- 如何登陆FTP服务器下载文件
原文:https://jingyan.baidu.com/article/f25ef254134bef482c1b82c2.html 方法/步骤1 1 第一种介绍的方法是从计算机(我的电脑)上登陆 ...
- 两种开源聊天机器人的性能测试(二)——基于tensorflow的chatbot
http://blog.csdn.net/hfutdog/article/details/78155676 开源项目链接:https://github.com/dennybritz/chatbot-r ...
- PyCharm2018 安装及破解方法
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012278016/article/details/81738676 目录 1>. 安装 2& ...
- .NET的那些事儿(9)——C# 2.0 中用iTextSharp制作PDF(基础篇) .
该文主要介绍如何借助iTextSharp在C# 2.0中制作PDF文件,本文的架构大致按照iTextSharp的操作文档进行翻译,如果需要查看原文,请点击一下链接:http://itextsharp. ...