<!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. Centos6.7安装Apache2.4+Mysql5.6+Apache2.4

    首先说下思路,因为一开始系统上已经跑了一套完成的 PHP 环境,那时候都是快速自动安装的,如果是跑一些5.3以下版本的话,很简单,几个指令,10分钟搞定了. 但现在要升级,彻底一点的话,唯有推倒重来了 ...

  2. [实变函数]5.3 非负可测函数的 Lebesgue 积分

    本节中, 设 $f,g,f_i$ 是可测集 $E$ 上的非负可测函数, $A,B$ 是 $E$ 的可测子集.       1 定义: (1) $f$ 在 $E$ 上的 Lebesgue 积分      ...

  3. 关于ASP.NET MVC中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据.   从控制器到视图 ...

  4. python-day19 Django模板,路由分发,ORM

    @获取文件所有数据 request.FILES: request.POST.get('fafafa')#拿到文件名: user = request.POST.get('user',None)#用get ...

  5. Linux 学大纲

  6. C++ STL堆操作

    /* STL 最大堆.最小堆的应用 */ #include <iostream> #include <vector> #include <algorithm> // ...

  7. C语言指针的高级操作

    C语言指针的高级操作 指针  指针 在上篇博客中我介绍了C语言指针的最基本操作,那么我在这篇博客中会介绍一下C语言指针的一些骚操作. 指向指针的指针 这名字乍一听有点拗口,再次一听就更加拗口了.先看定 ...

  8. selenium(java)处理HTML5的视频播放

    大多数浏览器使用控件(如 Flash) 来播放规频,但是,不同的浏览器需要使用不同的插件.HTML5 定义了一个新的元素<video>,,指定了一个标准的方式来嵌入电影片段.IE9+.Fi ...

  9. Redis+Keepalived实现高可用

    使用redis哨兵可以在主服务器出现故障的时候自动切换主从,但是从服务器的IP不同于原主服务器的IP还需要在客户端手动修改IP才能生效 下面使用keepalived实现VIP自动漂移 keepaliv ...

  10. 全局css,js缓存及更新版本策略

    在当今web世界里,CDN对于加速页面加载速度,提高用户体验起了非常重要的作用.但是问题也带来了:作为开发人员,可能需要不定时的更新部分静态文件,比如对网页的重新设计会涉及到css文件的更新,这时怎么 ...