图片延迟加载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的使用方法,需要的朋友可以参考下 ...
随机推荐
- Erlang ODBC 处理中文
erlang处理utf8字符集相对比较简单,因为它是用integer的list来保存所有的string的,所以处理什么字符集都没关系. 话虽这么说,但我在使用erlang的ODBC处理中文时,着实费了 ...
- Codeforces Round #143 (Div. 2) (ABCD 思维场)
题目连链接:http://codeforces.com/contest/231 A. Team time limit per test:2 seconds memory limit per test: ...
- Jquery与DOM对象
在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别 1.DOM对象(Document Object Model) 文档对象模型,每一份DOM ...
- CSS 实现三角形、梯形、等腰梯形
三角形 ; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: t ...
- 做量化模型Matlab、R、Python、F#和C++到底选择哪一个?
MATLAB是matrix&laboratory两个词的组合,意为矩阵工厂(矩阵实验室).是由美国mathworks公司发布的主要面对科学计算.可视化以及交互式程序设计的高科技计算环境.它将数 ...
- oracle 自动添加序号列 排序
select HSL.sortno, HSL.B, HSL.A, row_n ...
- WCF入门教程系列六
一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...
- BZOJ4195 NOI2015 程序自动分析
4195: [Noi2015]程序自动分析 Time Limit: 10 Sec Memory Limit: 512 MB Description 在实现程序自动分析的过程中,常常需要判定一些约束条件 ...
- hdu Intelligent IME
算法:字典树 题意:手机9键拼音:2:abc 3:def 4:ghi 5:jkl 6:mno 7:pqrs 8:tuv 9:wxyz: 第一行读入一个T,代表测试组数: 之后输入两个整数n和m, 有 ...
- [Database] Deadlock avoidance protocol
如何避免Deadlock,如果我们能提前知道各个Process对于资源的需求情况,我们就可以用Banker's algorithm (银行家算法) 来解决问题.可是这在现在中不好实现,因为很难提前知道 ...