图片延迟加载(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 ...
随机推荐
- 重构第24天 分解复杂的判断(Remove Arrowhead Antipattern)
理解: 当你的代码中有很深的嵌套条件时,花括号就会在代码中形成一个长长的箭头.我们经常在不同的代码中看到这种情况,并且这种情况也会扰乱代码的可读性. 如下代码所示,HasAccess方法里面包含一些嵌 ...
- C#全角转换成半角并检查
新建一个项目quanbanjiao,在此项目下新建一个类Class1 using System; using System.Web; using System.Text; namespace quan ...
- jQuery实现隐藏标签
要求:用户进入该页面时,品牌列表默认是精简显示,用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌. <%@ Page Language="C#" Inherit ...
- 无法将类型为“System.Windows.Controls.SelectedItemCollection”的对象强制转换为类型“System.Collections.Generic.IList`1
在WPF中DataGrid 选择事件中获取SelectedItems 报错如下 无法将类型为“System.Windows.Controls.SelectedItemCollection”的对象强制转 ...
- 互联网产品团队中Web前端工程师的重要性
国内外各大互联网公司,都有UEx/d|UCD|CDC(Customer Research & User Experience Design Center)团队. 在很多公司会认为,合格的产品经 ...
- IE Unknown runtime error
1. 在函数中使用原生的js的时候,有时在IE下会出现Unknown runtime error 火狐下正常 2. 解决办法, 将原生js改成jquery处理兼容问题 document.getElem ...
- C语言回滚(一)
//用循环计算输入的字符数 #include<stdio.h> #include<string.h> #include<stdlib.h> int main(){ ...
- jquery只能输入数字方法
本方法为验证文本框的输入内容,如果输入的是数字,则提示"√".否则提示“必填,且只能输入数字字符”.在线体验效果:http://keleyi.com/keleyi/phtml/zz ...
- 在SharePoint中无代码开发InfoPath应用: 一个测试Web Service的工具
这是这个系列的第一篇,介绍一个小工具,主要是用在Web Service测试的. 因为为了用一点高级的东西,就免不了和web service打交道. 你可以使用按照KB819267来修改web.conf ...
- STL--向量(vector)
STL的组成 标准模板库STL关注的重点是泛型数据结构和算法,其关键组成部分是容器(containers).算法(algorithms).迭代器(iterators).函数对象(Function Ob ...