图片延迟加载(lazyload)的实现原理
此前在浏览一些网站的时候,发现他们网站的图片都是你“鼠标”滚到哪,图片才会加载显示。当时觉得好神奇,怎么会这么“跟手”呢。
核心原理是:
1 设置一个定时器,计算每张图片是否会随着滚动条的滚动,而出现在视口(也就是浏览器中的展现网站的空白部分)中;
2 为<img>标签设置一个暂存图片URL的自定义属性(例如loadpic),当图片出现在视口时,再将loadpic的值赋给图片的src属性;
最后,贴出分别用原生js和jQuery实现该功能的实现方法:
1 原生JavaScript的实现方法
<script>
var imgs = document.getElementsByTagName('img');
// 获取视口高度与滚动条的偏移量
function lazyload(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
for(var i=0; i<imgs.length; i++) {
var x =scrollTop+viewportSize-imgs[i].offsetTop;
if(x>0){
imgs[i].src = imgs[i].getAttribute('loadpic');
}
}
} setInterval(lazyload,1000);
</script>
2 jQuery的实现方法
/**
* 图片的src实现原理
*/
$(document).ready(function(){
// 获取页面视口高度
var viewportHeight = $(window).height();
var lazyload = function() {
// 获取窗口滚动条距离
var scrollTop = $(window).scrollTop();
$('img').each(function(){
// 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度
var x = scrollTop + viewportHeight - $(this).position().top;
// 如果大于0 即该元素能被浏览者看到,则将暂存于自定义属性loadpic的值赋值给真正的src
if (x > 0)
{
$(this).attr('src',$(this).attr('loadpic'));
}
})
}
// 创建定时器 “实时”计算每个元素的src是否应该被赋值
setInterval(lazyload,100);
});
当然,上述代码还是很简陋,仅仅说了实现的原理,生产环境推荐使用:jquery_lazyload
图片延迟加载(lazyload)的实现原理的更多相关文章
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- jquery.lazyload插件实现图片延迟加载
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
- 图片延迟加载技术-Lazyload的应用
我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 关于lazyload图片延迟加载简单介绍
LazyLoad大家再熟悉不过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才会加载并显示出来,这和图片预加载 ...
- jquery.lazyload.js 图片延迟加载
当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...
随机推荐
- 【iOS】FMDB/SQLCipher数据库加解密,迁移
2016-04-19更新:本文代码可能有些问题,请移步 http://zhengbomo.github.io/2016-04-18/sqlcipher-start/ 查看 sqlite应用几乎在所有的 ...
- C#语法糖
首先需要声明的是“语法糖”这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率,在性能上也不会带来损失.这让java开发人员羡慕不已,呵呵. 1. ...
- DistributedCache小记
一.DistributedCache简介 DistributedCache是hadoop框架提供的一种机制,可以将job指定的文件,在job执行前,先行分发到task执行的机器上,并有相关机制对cac ...
- Servlet3.0 Test
1. Servlet3.0 Test and Annotation used 你可以从tomcat7中lib文件夹中找到servlet-api.jar package com.goodfan.serv ...
- HTML 编辑基础
HTML 基础语言 打开DREAMWEAVER,新建HTML.. body的属性: bgcolor 页面背景色 background 背景壁纸.图 ...
- 趣味问题:画图(c++实现)
描述:在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y2)的矩形指将横坐标范围从x1到x2,纵坐标范围从y1到y2之间的区域涂上颜色.下图给出了一个画了两个矩形的例子.第一个矩形是(1, ...
- SET UPDATE TASK LOCAL
SET Effect Switches on the local update task. This means that when you specify CALL FUNCTION ... IN ...
- FIM 2010: Kerberos Authentication Setup
The goal of this article is to provide some background information regarding the Kerberos related co ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q40-Q44)
Question 40You need to send a single value from a consumer Web Part to a provider Web Part.Which int ...
- ubuntu解决arm-linux-gcc no such file的问题
这种情况是因为你的操作系统是Ubuntu 64位的,而交叉编译工具链都是32位执行程序.要成功运行这些交叉编译工具链,需要与这些工具链相关的32位库.安装命令如下:sudo apt-get insta ...