<!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. 使用gradle上传项目到jcenter

    想不想把自己的库也上传到jcenter,然后只需要一名话 compile com.zzb.library:android-common:0.1.0 //(compile group_id:artifa ...

  2. 微信 python搭建服务器

    1. 搭建服务以web.py网络框,python,腾讯云服务器为例介绍. 1)安装/更新需要用到的软件 安装python2.7版本以上 安装web.py pip install web.py sudo ...

  3. OpenCV 鼠标手动绘制掩码图像

    OpenCV 鼠标手动绘制掩码图像 完整的代码: #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui ...

  4. （转自精通Python设计模式）Python设计模式之创建型模式——2.建造者模式

    建造者模式将一个复杂对象的构造过程与其表现分离,这样,同一个构造过程可用于创建多个不同的表现. 我们来看个实际的例子,假设我们想要创建一个HMTL页面生成器,HTML页面的基本结构(构造组件)通常是一 ...

  5. GC算法与种类

  6. linux c段错误分析方法

    from:http://blog.csdn.net/adaptiver/article/details/37656507 一. 段错误原因分析 1 使用非法的指针,包括使用未经初始化及已经释放的指针( ...

  7. hdu1051

    #include<iostream> #include<algorithm> using namespace std; struct SIZE { int l; int w; ...

  8. TMF大数据分析指南 Unleashing Business Value in Big Data（一）

    大数据分析指南 TMF Frameworx最佳实践 Unleashing Business Value in Big Data 前言 此文节选自TMF Big Data Analytics Guide ...

  9. Java Script 学习笔记 -- Ajax

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  10. Head First Python 1-4章学习感悟

    一.学习知识总结 (1)迭代         range(起始值,结束值,步长):包含起始值,不包含结束值,步长为正数 (2)导入模块 from datetime import datetime (3 ...