<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        #div1 {

            height: 200px;

            background-color: #bbbbbb;

            font-size: 100px;

        }

    </style>

</head>

<body style="height:3500px">

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br /><br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br /><br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <img id="div1" src="../Img/4.png" realsrc="http://cdn1.gurucv.com/Reg/Images/person/person1.png" />

    <script type="text/javascript">

        //var ele = document.getElementById('div1');

        var ele = document.getElementsByTagName('img').item(0);

        function offset(ele) {

            var t = ele.offsetTop;

            var l = ele.offsetLeft;

            var p = ele.offsetParent;

            while (p) {

                if (window.navigator.userAgent.indexOf('MSIE 8') > -1) {

                    l += p.offsetLeft;

                    t += p.offsetTop;

                } else {

                    l += p.offsetLeft + p.clientLeft;

                    t += p.offsetTop + p.clientTop;;

                }

                p = p.offsetParent;

            }

            return { left: l, top: t };

        }

        var h = offset(ele).top + ele.offsetHeight;//这是这个元素底边距文档顶部的绝对偏移量

        window.onscroll = function () {

            var winBottom = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight);

            if (h < winBottom) {

                // ele.src = ele.realsrc; //自定义属性，不能用 ‘.’的方式去取

                if (!ele.loaded) {

                    var realImg = ele.getAttribute('realsrc');

                    ele.src = '../Img/loading.jpg';

                    var tempImg = new Image;//等价于 document.createElement('img');

                    tempImg.src = realImg;//自动下载图片，自动去请求图片

                    /*

                    浏览器所有的外链资源，都是缓存

                    */

                    tempImg.onload = function () {//只是被运行一次

                        ele.src = realImg;

                        ele.loaded = true;//标志属性

                    };

                }

            }

        }

    </script>

</body>>

</html>

　　

javascript 图片延迟加载的更多相关文章

  1. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  2. javascript图片延迟加载（转载）

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 前端页面优化：javascript图片延迟加载

    自己写了个简单的图片延迟加载小插件. 功能如下: 页面刷新,当前屏幕图片直接加载真实地址,body被卷去的部分和下方未显示的部分的img均加载通用图片如:loding.gif 随着屏幕上下滚动加载相应 ...

  4. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  5. Javascript 图片延迟加载之理论基础

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...

  7. jQuery图片延迟加载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...

  8. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  9. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

随机推荐

  1. Python 3.5.2建立与DB2的连接

    Python是可以连接数据库,并从数据库获取相应的数据库的,但是怎么连接呢? 这是个问题,以下是我使用Python建立数据库连接的步骤(我使用的工具为:PyCharm) 1.首先下载setuptool ...

  2. Percona-Xtrabackup 2.3.3 慢查询不再堵塞备份（一）

    在Percona-Xtrabackup 2.3.3[root@b28-19-17 bak]# rpm -q percona-xtrabackuppercona-xtrabackup-2.3.3-1.e ...

  3. Oracle private dblink和pubic dblink

    DB : 11.2.0.3.0 Oracle DBLINK 创建分为private 和 public dblink,默认创建的为private ; private dblink 只有创建的schema ...

  4. verilog语法之memory存储器

    命名规则:reg[n-1:0] 存储器名[m-1:0] 说明:这是m个n位的存储器,该存储器的地址范围是0-(m-1) 举例:reg[3:0] memo[255:0] 说明:这是256个4位存储器,该 ...

  5. 47.MIF和COE文件格式

    .mif和.coe这两个文件分别是Quartus和ISE的RAM和ROM的初始化文件,因此了解他们的格式,是很必要的   MIF文件的格式如下:   WIDTH=14; --数据宽度为14位 DEPT ...

  6. php file_put_contents() 写入回车

    PHP file_put_contents() 函数是一次性向文件写入字符串或追加字符串内容的最合适选择. file_put_contents() file_put_contents() 函数用于把字 ...

  7. [Z] 深入浅出 Systemd

    1. Systemd 的简介和特点 Systemd 是 Linux 系统中最新的初始化系统(init),它主要的设计目标是克服 sysvinit 固有的缺点,提高系统的启动速度.systemd 和 u ...

  8. android 通过AlarmManager实现守护进程

    场景:在app崩溃或手动退出或静默安装后能够自动重启应用activity 前提:得到系统签名 platform.pk8.platform.x509.pem及signapk.jar 三个文件缺一不可(系 ...

  9. IIS8中 出现ashx 401：未授权，uploadify上传文件失败

    环境:阿里云服务器 windows2012  + IIS8 +asp.net 访问IIS 出现能正常访问aspx页面,但是通过ajax访问ashx上传文件的时候就出现ashx  Status Code ...

  10. 1. ProGit-起步

    (1) 版本控制 本地式 大都是采用数据库记录文件的差异 典型的有rcs,主要保存并管理文件补丁,根据补丁去计算各版本文件内容 缺点:无法协同工作 集中式 通过一个单一的集中服务器去管理所有文件的修订 ...