<!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. java中对象的序列化和反序列化

    [对象的序列化和反序列化 ] 1.定义:序列化--将对象写到一个输出流中.反序列化则是从一个输入流中读取一个对象.类中的成员必须是可序列化的,而且要实现Serializable接口,这样的类的对象才能 ...

  2. RMAN 报：ORA-19504 ORA-27038

    在itpub中看到下面的问题: oracle 10g备份脚本如下run{allocate channel d1 device type disk MAXPIECESIZE=100M;crosschec ...

  3. 微软云平台媒体服务实践系列 1- 使用静态封装为iOS, Android 设备实现点播（VoD）方案

    微软的云平台媒体服务为流媒体服务提供了多种选择,在使用流媒体服务为企业做流媒体方案时,首先需要确认要流媒体接收目标,如针对广大iOS, Android移动设备,由于它们都支持HLS 格式的流媒体,基于 ...

  4. ZLG_GUI配置与函数介绍

    http://www.docin.com/p-825479457.html ZLG_GUI配置与函数介绍

  5. iOS学习之Object-C语言类的扩展

    一.Category      1.Category:也叫分类,类目.是为没有源代码的类扩充功能.扩充的功能会成为原有类的一部分,可以通过原有类或者原有的对象直接调用,并且可继承.      2.注意 ...

  6. COS中访问文件的三种方式

    1.通过FID来访问文件(比如EF,DF) 2.通过SFI来访问文件(有些COS命令可以通过SFI来快速访问文件,而不需要事先选中文件) 3.通过文件名来访问文件(只能是DF文件)

  7. Think in java备忘录

    1..new在内部类中的使用 .new可以用使用外部类对象创建一个内部类,对象 DotNew.java package com.gxf.innerclass; public class DotNew ...

  8. 丢掉 WinPE，使用 DISKPART 来分区吧

    自 Windows Vista 之后的操作系统,如果在安装系统的时候使用 Windows 自带的分区功能,则会多出一个 100M 的系统保留分区.这会让一个物理硬盘,原先最多可以分 4 个主分区的,现 ...

  9. Teamwork-Week2真对必应词典和有道词典的软件分析和用户需求调查（桌面版）

    经调查,现在有道词典在该领域拥有很大程度的市场占有率,所以我们将有道词典与必应词典进行对比. 核心功能一:单词本 有道词典中的单词本都只能是由用户手动添加不会的单词,而必应词典中的单词 不仅可以被自己 ...

  10. “我爱淘”冲刺阶段Scrum站立会议4

    完成任务: 完成了搜索界面的Activity的编写. 计划任务: 实现数据库的链接,用户可以查到自己需要的书籍的信息. 遇到问题: 数据库的操作,实现查询功能: