<!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. Android WIFI 启动流程(TIP^^)

    前几天因为解决一堆Bug,没时间写.我不会每天都写,就是为了存档一些资料. 内容来源:工作中接触到的+高手博客+文档(Books)=自己理解 仅限参考^^ 此博客是上一个<<Android ...

  2. Java之有病的policy配置

    使用-Djava.security.policy=xxx.policy启动安全策略, 你会想到codesource的配置如此蛋疼么? grant CodeBase "file:////D:/ ...

  3. 官方的objective - c风格指南。

    The official raywenderlich.com Objective-C style guide. This style guide outlines the coding convent ...

  4. Linux系统木马后门查杀方法详解

    木马和后门的查杀是系统管理员一项长期需要坚持的工作,切不可掉以轻心.以下从几个方面在说明Linux系统环境安排配置防范和木马后门查杀的方法: 一.Web Server(以Nginx为例) 1.为防止跨 ...

  5. python time,string 转换

    1. 将字符串转换成时间,字符串格式为05/16/2015 datetime.datetime.strptime(STRING,"%m/%d/%Y") 2. 将时间转换成字符串:格 ...

  6. html textarea换行和dom换行

    从事开发已经两年多了,但是还是不会发现问题找原因,可能是自己一直在学校养成的习惯吧,不过最近在葛经理的带领下开始学会找原因了,而且发现自己变得更成熟了. 现在讲讲textarea和dom的换行吧,我们 ...

  7. char,wchar_t,WCHAR,TCHAR,ACHAR的区别----LPCTSTR

    转自http://blog.chinaunix.net/uid-7608308-id-2048125.html 简介:这是DWORD及LPCTSTR类型的了解的详细页面,介绍了和类,有关的知识,加入收 ...

  8. 动态生成C# Lambda表达式

    转载:http://www.educity.cn/develop/1407905.html,并整理! 对于C# Lambda的理解我们在之前的文章中已经讲述过了,那么作为Delegate的进化使用,为 ...

  9. SQL Server性能优化（4）命名和书写规范

    命名规范是一个老生常谈的问题,好的命名规范对于团队程序开发,对bug定位.处理,项目延续有很重要的作用. 一. 列举现在的问题:     1.名称首字母不大写     2. 用中文名字         ...

  10. python 单元测试-unittest

    参考资料:https://docs.python.org/3.4/library/unittest.html#module-unittest 一张图解决问题: 涉及5块内容:case.suite.lo ...