图片延迟加载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的使用方法,需要的朋友可以参考下 ...
随机推荐
- Putty server refused our key的解决方法
在使用putty工具使用密钥远程登陆CentOS系统时,出现Putty server refused our key提示,解决办法: 1.查看是否关掉SELINUX. 相关命令:getenforce, ...
- 什么是 docker?
关于 Docker 是什么,有个著名的隐喻:集装箱.但是它却起了个“码头工人”( docker 的英文翻译)的名字.这无疑给使用者很多暗示:“快来用吧!用了 Docker ,就像世界出现了集装箱,这样 ...
- hdu 3836 Equivalent Sets(tarjan+缩点)
Problem Description To prove two sets A and B are equivalent, we can first prove A is a subset of B, ...
- Vue + vue-router
搞了一天的element-ui,vue-router,把侧栏的导航菜单搞了出来后,试着在菜单上加入链接,研究了下官方提供的文档,发现要使用vue-route. 在项目中安装好vue-route, 对照 ...
- UVa 10701 - Pre, in and post
题目:已知树的前根序,中根序遍历转化成后根序遍历. 分析:递归,DS.依据定义递归求解就可以. 前根序:根,左子树,右子树: 中根序:左子树,根,右子树: 每次,找到根.左子树.右子树,然后分别递归左 ...
- MySQL复制协议
http://hamilton.duapp.com/detail?articleId=27
- python - socket模块1
1.使用生活中的接打电话,解释socket通信流程 2.根据上图,写出socket通信的伪代码 2.1.server端伪代码 #买手机 #买手机卡 #开机 #等待电话 #收消息 #发消息 #挂电 ...
- MySql 事务+异常处理+异常抛出
-- 测试用表 -- innodb 支持事务 CREATE TABLE `tb_test` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) NOT NULL, P ...
- .net中的特性
本文来之:http://hi.baidu.com/sanlng/item/afa31eed0a383e0e570f1d3e 在一般的应用中,特性(Attribute,以称为属性)好像被使用的不是很多. ...
- 《第一行代码》学习笔记12-UI(1)
1.程序需要注销或者退出,用一个专门的集合类对所有的活动进行管理即可. 2.可视化编辑工具不利于真正了解界面背后的实现原理,通常这种方式制作的界面都不具有很好的屏幕适配性, 而且当需要编写较为复杂的界 ...