<!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 />

    <div id="div1">

        我是div1

    </div>

    <script type="text/javascript">

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

        //ele.offsetTop;

        //ele.offsetLeft;

        //ele.offsetHeight;

        //ele.offsetParent;

        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.innerHTML = "哈哈，我来也";

            }

        }

        //var h = ht(ele).top + ele.offsetHeight;

        //window.onscroll = function () {

        //}

    </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. 未能加载文件或程序集“System.Web.Razor”或它的某一个依赖项。文件或目录损坏且无法读取。

    “/”应用程序中的服务器错误. 未能加载文件或程序集“System.Web.Razor”或它的某一个依赖项.文件或目录损坏且无法读取. (异常来自 HRESULT:0x80070570) 说明: 执行 ...

  2. ExtJS MVC 学习手记3

    在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...

  3. bootstrap API地址

    http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#pagination-table

  4. [转]ubuntu 14.04 系统设置不见了

    [转]ubuntu 14.04 系统设置不见了 http://blog.sina.com.cn/s/blog_6c9d65a10101i0i7.html 不知道删除什么了,系统设置不见了! 我在终端运 ...

  5. 如何设置potplayer播放时总在最前端

    1.测试平台:potplayer 64位 2.步骤:在播放器界面上点击右键->选项->基本->最前端方式-选播放视频时在最前端(或是总在最前端) 3.选择:基本->最前端方式- ...

  6. BICEP单元测试计划-四则运算-测试

    一.6个值得测试的具体部位,他们能够提高你的测试技巧 Right-结果是否正确? B-是否所有的边界条件都是正确的? I-能查一下反向关联吗? C-能用其他手段交叉检查一下结果吗? E-你是否可以强制 ...

  7. struts2标签详解

    struts2标签讲解 要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可:<%@ taglib prefix="s" uri="/struts-t ...

  8. SQL Server性能优化（3）使用SQL Server Profiler查询性能瓶颈

    关于SQL Server Profiler的使用,网上已经有很多教程,比如这一篇文章:SQL Server Profiler:使用方法和指标说明.微软官方文档:https://msdn.microso ...

  9. sudo su 提示没有配置JDK environment

    sudo su 提示没有配置JDK environment 最近工作遇到一问题,我通过SecureCRT远程登录服务器,部署web应用.将变更文件替换后,我需要切换到root用户,重启Tomcat.所 ...

  10. PF_PACKET在内核的流程

    PF_PACKET在内核的流程   套接字创建 packet_create() --> 赋值packet_ops   接收流程 packet_recvmsg() skb_recv_datagra ...