<!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. "大账户"时代

    当要下载某文件时,哪怕是免积分,也需要登陆账户才能下载.  当要浏览某论坛时,只有注册账户,才可以浏览帖子.  当要网购商品时,必须注册账户,还要有众多宝宝平台,才可以实现交易.  当要团购时,必须先 ...

  2. 在mac系统安装Apache Tomcat的详细步骤[转]

    对于Apache Tomcat 估计很多童鞋都会,那么今天就简单说下在mac上进行tomcat的安装: 第一步:下载Tomcat   这里Himi下载的tomcat version:7.0.27 直接 ...

  3. 基于NPOI导出Excel

    在上一篇文章[关于大数据的查询与导出]中,提到了使用NPOI组件导出Excel,本想上次一起分享给大家,无奈最近比较忙,今天抽空整理了下,分享出来. 预置填充模板,并且需要支持公式计算; 可导入图片; ...

  4. [Linq Expression]练习自己写绑定

    源代码:TypeMapper.zip 背景 项目中,我们会经常用到各种赋值语句,比如把模型的属性赋值给UI,把视图模型的属性拷贝给Entity.如果模型属性太多,赋值也会变成苦力活.所以,框架编程的思 ...

  5. 触发器（trigger）的作用？？？

    1.触发器,英文名trigger,可以简单的理解为: 就相当于是一个事件的触发装置,当满足了一定的事件触发条件后进行相应的操作 例如当复位set信号到来时,我们就让A<=B,这样一个系统就是一个 ...

  6. 在51系列中data,idata,xdata,pdata的区别

    在51系列中data,idata,xdata,pdata的区别: data:固定指前面0x00-0x7f的128个RAM,可以用acc直接读写的,速度最快,生成的代码 也最小. idata:固定指前面 ...

  7. 【BOZJ 1901】Zju2112 Dynamic Rankings

    Description 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]……a[j]中第k小的数是 ...

  8. 收集的冻结table 标题和左侧（完美）

     <html> <head>     <meta name="viewport" content="width=device-width&q ...

  9. Windows8 各种版本区别对比详解

    微软的 Windows8 操作系统提供了4个不同的版本,分别是 Windows RT.Windows 8 标准版.Windows 8 Pro 专业版 以及 Windows 8 Enterprise 企 ...

  10. pspo

    一.项目计划总结: 周活动总结表 姓名:               日期:3.12.2015 日期       任务 听课 编写程序 阅读课本 准备考试 日总计 周日 周一 周二 周三 10:00- ...