<!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. .NET生成ICO图标

    using System; using System.Collections.Generic; using System.Web; using System.Drawing; using System ...

  2. SQL查询语句大全集锦

    SQL查询语句大全集锦 一. 简单查询 简单的Transact-SQL查询只包括选择列表.FROM子句和WHERE子句.它们分别说明所查询列.查询的 表或视图.以及搜索条件等. 例如,下面的语句查询t ...

  3. (补)Java解析XML之dom4j

    上次记得忘了记最流行的dom4j方法了,用的还是上次的那个XML文件 注:需要添加dom4j.jar文件 package com.xujingyang.dom4j; import org.dom4j. ...

  4. php学习笔记-可变变量

    看一个例子. <?php $a = 'hello'; $hello = 'hi'; echo $$a; ?> 如果一个变量名前面有两个美元符号,那么这个变量就叫做可变变量.就拿上面这个举例 ...

  5. Java基础——深入剖析Java中的装箱和拆箱

    (转自:http://www.cnblogs.com/dolphin0520/p/3780005.html) 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若 ...

  6. 项目中缺少org.wltea.ik-analyzer如何解决？

    IKAnalyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包.从2006年12月推出1.0版开始,IKAnalyzer已经推出了3个大版本.最初,它是以开源项目Luence为应用主体 ...

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

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

  8. C++基础之函数和作用域

    (1)函数的定义格式如下所示.<类型><函数名>(<形参表>) {<若干条语句>}其中,<类型>包含存储类和数据类型.存储类省略为外部函数, ...

  9. LVM使用

    LVM框架 LVM实验环境准备 创建一个128MB的文件模拟磁盘 [centos@centos lvm]$ dd if=/dev/zero of=./disk.img count=128 bs=1MB ...

  10. Exceptionless - .Net Core开源日志框架

    Exceptionless - .Net Core开源日志框架 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/11020140 ...