<!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的混合使用（实现图片异步加载）的更多相关文章

  1. 基于jQuery的图片异步加载和预加载实例

    如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...

  2. Android-Universal-Image-Loader 图片异步加载类库的使用

    在博客中看到一篇利用组件进行图片异步加载的文章在此作记录 原文:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载并缓存的 ...

  3. Android图片异步加载框架Android-Universal-Image-Loader

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个 ...

  4. Android-Universal-Image-Loader 图片异步加载类库的使用（超详细配置）

    这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...

  5. Android ListView 图片异步加载和图片内存缓存

    开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用 ...

  6. Android 图片异步加载的体会，SoftReference已经不再适用

      在网络上搜索Android图片异步加载的相关文章,目前大部分提到的解决方案,都是采用Map<String, SoftReference<Drawable>>  这样软引用的 ...

  7. 【转】Android-Universal-Image-Loader 图片异步加载类库的使用（超详细配置）

    Android-Universal-Image-Loader 原文地址:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载 ...

  8. Android图片异步加载之Android-Universal-Image-Loader

    将近一个月没有更新博客了,由于这段时间以来准备毕业论文等各种事务缠身,一直没有时间和精力沉下来继续学习和整理一些东西.最近刚刚恢复到正轨,正好这两天看了下Android上关于图片异步加载的开源项目,就 ...

  9. Android图片异步加载之Android-Universal-Image-Loader（转）

    今天要介绍的是Github上一个使用非常广泛的图片异步加载库Android-Universal-Image-Loader,该项目的功能十分强大,可以说是我见过的目前功能最全.性能最优的图片异步加载解决 ...

  10. 开源的Android开发框架-------PowerFramework使用心得（二）图片异步加载ImageTask

    图片异步加载.可以备注图片是否缓存.缓存状态. 1.缓存-SD卡,路径可设置 2.图片压缩 3.可加载本地和网络图片 4.url为本地视频文件可以显示缩略图 5.中文url图片地址FileNotFou ...

随机推荐

  1. mysql-日志种类

    MySQL有以下几种日志:  1,错误日志:记录启动.运行或停止时出现的问题,一般也会记录警告信息.  2,一般查询日志:记录建立的客户端连接和执行的语句.  3,慢查询日志:记录所有执行时间超过lo ...

  2. Dialog 自定义使用2(进度条)

    1:  自定义的Dialog 代码: public class IphoneProgersssDialog extends Dialog { private Context context; priv ...

  3. xdu2017校赛F

    Problem F Dogs of Qwordance Senior Backend R&D Engineers 问题描述 那年夏天,锘爷和杰师傅漫步在知春公园的小道上.他们的妻子.孩子牵 着 ...

  4. [poj3250]单调栈 Bad Hair Day

    解题关键:将每头牛看到的牛头数总和转化为每头牛被看到的次数,然后用单调栈求解,其实做这道题的目的只是熟悉下单调栈 此题为递减栈 #include<cstdio> #include<c ...

  5. nodejs中 underscore 包有什么作用

    Underscore一个JavaScript实用库,提供了一整套函数式变成有用的实用功能,但是没有扩展任何JavaScript内置对象.它是这个问题的答案:“如果我在一个空白的HTML页面前坐下, 并 ...

  6. 点云视窗类CloudViewer

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=149 点云视窗类CloudViewer是简单显示点云的可视化工具类,可以让用 ...

  7. c# Aspose.Words插入饼图PieChart

    private static void Main(string[] args) { Document doc = new Document(); DocumentBuilder builder = n ...

  8. 阶段4-独挡一面\项目-基于视频压缩的实时监控系统\Sprint1-基于Epoll架构的采集端程序框架设计\第2课-基于Epoll的采集端程序框架设计

    回顾之前的整个程序架构 把epoll机制应用到这个架构上去 下面主要去分析我们的系统中有没有需要等待的事件,先看看采集子系统 在采集子系统当中,摄像头有数据,摄像头采集到图像数据可以作为一个等待事件. ...

  9. IOS 通讯录 右侧的字母栏

    http://blog.csdn.net/nicholas6lee/article/details/7633708 Android实现通讯录排序的方式,可借鉴.

  10. 将前台传回的HttpServletRequest转换成HashMap

    import java.util.HashMap;import java.util.Map;import java.util.Map.Entry;import java.util.Set; impor ...