图片延迟加载scrollLoading.js应用
<ul>
<li><a href="http://news.qq.com/" target="_blank" name="xinwen" title="腾讯新闻">
<img class="scrollLoading" data-url="images/col_1.png" src="data:images/loading.gif" width="108"
height="86" border="0" />
</a> </li>
<li><a href="http://news.163.com/" target="_blank" name="xinwen" title="网易新闻">
<img class="scrollLoading" data-url="images/col_2.png" src="data:images/loading.gif" width="108"
height="86" border="0" /></a> </li>
<li><a href="http://www.people.com.cn/" target="_blank" name="xinwen" title="人民网">
<img class="scrollLoading" data-url="images/col_3.png" src="data:images/loading.gif" width="108"
height="86" border="0" /></a> </li>
<li><a href="http://www.chinabyte.com/" target="_blank" name="xinwen" title="比特网">
<img class="scrollLoading" data-url="images/col_4.png" src="data:images/loading.gif" width="108"
height="86" border="0" /></a> </li>
<li><a href="http://www.cntv.cn/" target="_blank" name="xinwen" title="央视网">
<img class="scrollLoading" data-url="images/col_5.png" src="data:images/loading.gif" width="108"
height="86" border="0" /></a> </li>
</ul> js调用 <script type="text/javascript">
$(function () {
$(".scrollLoading").scrollLoading();
});
</script>说明:1.需要引入jq 2.引用 <script src="js/jquery.scrollLoading.js" type="text/javascript"></script>3.src为图片加载时候的lodging的图片 ,data-url中的路径才是真正的图片路径!,具体原来请百度! 效果图:pasting
图片延迟加载scrollLoading.js应用的更多相关文章
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- js图片延迟加载
什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
随机推荐
- 用Nginx实现Session共享的均衡负载
前言 大学三年多,也做个几个网站和APP后端,老是被人问到,如果用户多了服务器会不会挂,总是很尴尬的回答:“哈哈,我们的用户还少,到了服务器撑不住的时候,估计都上市了吧”.说是这么说,但是对于有强迫症 ...
- Linux目录结构及文件基础操作
一.Linux目录结构 windows系统中主要以存储介质为主(磁盘). UNIX和Linux系统中主要是以目录为主(以树形目录结构的形式构建整个系统). 1. FHS(Filesystem Hier ...
- C#基础:C#4.0权威指南 杂笔一
1.c#中数组初始化的几种不同用法 int[] name = new int[NUM]; int[] name = {1, 2, 3, 4, 5, 6}; int[] ...
- Curl命令使用方法
Curl是Linux下一个很强大的http命令行工具,其功能十分强大.1) 读取网页$ curl http://www.linuxidc.com2) 保存网页$ curl http://www.lin ...
- python - 类成员修饰符
在java,c#类的成员修饰符包括,公有.私有.程序集可用的.受保护的. 对于python来说,只有两个成员修饰符:公有成员,私有成员 成员修饰符是来修饰谁呢?当然是修饰成员了.那么python类的成 ...
- php不会的点
1.DIRECTORY_SEPARATOR:DIRECTORY_SEPARATOR是一个显示系统分隔符的命令,DIRECTORY_SEPARATOR是PHP的内部常量,不需要任何定义与包含即可直接使用 ...
- vs2015体验
项目结构 bower.json Bower依据此文件安装需要的前端的包 package.json NPM依据此文件获取对应的包 project.json 包含用于NPM的"poststore ...
- java 静态文件使用注解
spring框架为我们代码的编写带来了极大的便利,特别是注解的使用.但是有个问题,当我们在静态文件中使用注解的时候,这个时候就会报错了.如以下代码: @Autowired private UserSe ...
- 本地开发时同时启动多个tomcat服务器
1.环境变量中不要设置CATALINA_HOME: 2.分别修改安装目录下的conf子目录中的server.xml文件: a.修改http访问端口(默认为 8080端口),将8080修改为tomcat ...
- 流输入练习——寻找Sb.VI codevs 3096
题目描述 Description 已知某开放授权人员名叫Serb,由于经常修改各种数据,因此开发人员们都喊他SB.现在他和许多人一起过飞机安检,排成了一长队列,请问SB.是否在队列中. 输入描述 In ...