<!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. Java探索之旅(10)——数组线性表ArrayList和字符串生成器StringBuffer/StringBuilder

    1.数组线性表ArrayList 数组一旦定义则不可改变大小.ArrayList可以不限定个数的存储对象.添加,插入,删除,查找比较数组更加容易.可以直接使用引用类型变量名输出,相当于toString ...

  2. CURL访问举例

    <?php function request($url, $params = [], $requestMethod = 'GET', $jsonDecode = true, $headers = ...

  3. top查看CPU情况

    Linux查看CPU情况 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top ...

  4. 关于Android进程的启动和消亡

    在打开一个应用程序的时候,packagemanager会根据manifest文件去查找有没有相应的进程已启动,若果没有启动,那么就启动一个新的进程 进程退出有两种方式,用finish结束主activi ...

  5. 使用PM2管理nodejs进程分享

    摘要:pm2 是一个带有负载均衡功能的Node应用的进程管理器.本文主要介绍了详解使用PM2管理nodejs进程,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助 ...

  6. 关于android上dpi/screen-size的厘清解释

    android定义了四种screen-size: small normal large xlarge 同时定义了六种dpi级别: ldpi (low) ~120dpimdpi (medium) ~16 ...

  7. Leetcode：9. Palindrome Number

    这题要求不能使用额外的空间,我也就没做,看了下别人的代码,挺有意义的一道题目,出坏了. 解题思路:从右往左颠倒过来,看看这个值和原来的x值是不是一样,最后还要注意像20这种情况,也是的 public ...

  8. python包管理

    如果是python 项目目录,例如pycharm里新建的python项目,则可以通过from,import导入目录下的文件夹. 如果是普通文件目录,则代码里不能相对方式导入该目录下的文件夹,需要加入要 ...

  9. SCSS 中的 &::before 和 &::after

    在看一个文件的时候,发现有&::before 和 &::after, 没有理解怎么用的,因为以前在项目的css文件中,从来没有使用过,也没有见过 网上查询了一下,才发现&::b ...

  10. 实现one hot encode独热编码的两种方法

    实现one hot encode的两种方法: https://stackoverflow.com/questions/37292872/how-can-i-one-hot-encode-in-pyth ...