Jquery ajax 与 lazyload的混合使用（实现图片异步加载）
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>This is a ajax test</title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/test_js.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
url = $.ajax({
type: "get",
url: "img_url.txt",
async: true,
success: function() {
$("img.lazy").attr("data-original", url.responseText);
$("img.lazy").lazyload({
effect: "fadeIn",
});
}
});
});
</script>
<link rel="stylesheet" href="css/img.css" />
</head> <body>
<img class="lazy" src="img/bmw_m1_hood.jpg" width="100px" height="100px">
<img class="lazy" src="img/bmw_m1_hood.jpg" width="100px" height="100px">
<img class="lazy" src="img/bmw_m1_hood.jpg" width="100px" height="100px">
<img class="lazy" src="img/bmw_m1_hood.jpg" width="100px" height="100px">
<img class="lazy" src="img/bmw_m1_hood.jpg" width="100px" height="100px">
<img class="lazy" src="img/bmw_m1_hood.jpg" width="100px" height="100px">
</body> </html> CSS：
.lazy{
margin-top: 1000px;
}
思路是先用ajax请求图片地址，然后在success里面用Lazyload实现加载图片，这种方式效率高，用户亲和力好
Jquery ajax 与 lazyload的混合使用（实现图片异步加载）的更多相关文章
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
- Android-Universal-Image-Loader 图片异步加载类库的使用
在博客中看到一篇利用组件进行图片异步加载的文章在此作记录 原文:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载并缓存的 ...
- Android图片异步加载框架Android-Universal-Image-Loader
版权声明:本文为博主原创文章,未经博主允许不得转载. Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个 ...
- Android-Universal-Image-Loader 图片异步加载类库的使用（超详细配置）
这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...
- Android ListView 图片异步加载和图片内存缓存
开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用 ...
- Android 图片异步加载的体会，SoftReference已经不再适用
在网络上搜索Android图片异步加载的相关文章,目前大部分提到的解决方案,都是采用Map<String, SoftReference<Drawable>> 这样软引用的 ...
- 【转】Android-Universal-Image-Loader 图片异步加载类库的使用（超详细配置）
Android-Universal-Image-Loader 原文地址:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载 ...
- Android图片异步加载之Android-Universal-Image-Loader
将近一个月没有更新博客了,由于这段时间以来准备毕业论文等各种事务缠身,一直没有时间和精力沉下来继续学习和整理一些东西.最近刚刚恢复到正轨,正好这两天看了下Android上关于图片异步加载的开源项目,就 ...
- Android图片异步加载之Android-Universal-Image-Loader（转）
今天要介绍的是Github上一个使用非常广泛的图片异步加载库Android-Universal-Image-Loader,该项目的功能十分强大,可以说是我见过的目前功能最全.性能最优的图片异步加载解决 ...
- 开源的Android开发框架-------PowerFramework使用心得（二）图片异步加载ImageTask
图片异步加载.可以备注图片是否缓存.缓存状态. 1.缓存-SD卡,路径可设置 2.图片压缩 3.可加载本地和网络图片 4.url为本地视频文件可以显示缩略图 5.中文url图片地址FileNotFou ...
随机推荐
- JOptionPane简介
------------------siwuxie095 JOptionPane 是弹出窗体(对话框)的集合类,它本身 并不是一个具体的 ...
- 使用python内置模块os和openpyxl搜索指定文件夹下Excel中的内容
在指定路径下,搜索Excel文件中包含的指定内容,首先需要遍历指定路径,得到该路径下所有Excel文件的绝对/相对路径:然后读取Excel中内容,将文件中的每个单元格的值与要搜索的内容进行判断(正则比 ...
- 20. CTF综合靶机渗透(十三)
靶机说明: Wellcome to "PwnLab: init", my first Boot2Root virtual machine. Meant to be easy, I ...
- sublime插件-OmniMarkupPreviewer浏览器打开报404解决办法
Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - Default ...
- Java静态检测工具/Java代码规范和质量检查简单介绍（转）
静态检查: 静态测试包括代码检查.静态结构分析.代码质量度量等.它可以由人工进行,充分发挥人的逻辑思维优势,也可以借助软件工具自动进行.代码检查代码检查包括代码走查.桌面检查.代码审查等,主要检查代码 ...
- 2、Jquery_事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- gitlab 502解决方案
gitlab突然出现502 尝试gitlab-ctl restart.gitlab-ctl reconfigure 无效. 之后做法: #查看git日志 gitlab-ctl tail发现日志报错:端 ...
- Neutron网络研究
你将学到什么 虚拟机的Ping包是如何出外网的 DevStack环境准备 节点 硬件配置 网络配置 类型 操作系统 DevStack 4G 2CPU 50GB 2张网卡(NAT模式) VMWare虚拟 ...
- OpenStack虚机状态变化图解
对官网上内容的一个翻译,方便自己以后查找资料用 The following diagrams and tables show the required virtual machine (VM) sta ...
- 洛谷P1171 售货员的难题
P1171 售货员的难题 题目背景 数据有更改 题目描述 某乡有n个村庄(1<n<20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)是已知的,且 ...