jquery 当页面图片加载之后_图片的懒加载和预加载
【1.1】什么是懒加载?
懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
【1.2】为什么要懒加载?
当很多页面,内容很丰富,页面很长,图片较多的时候。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载所有图片,等待时间很长,用户难免会心生抱怨,这就严重影响用户体验。
【1.3】懒加载的原理
页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把真正的路径存在元素的“src”(这个名字起个自己认识好记的就行)属性里,要用的时候就取出来,再设置;
【1.4】懒加载的优点
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好
【1.5】懒加载实现方式
方法一:纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
方法二:条件加载,符合某些条件,或触发了某些事件才开始异步下载。
方法三:可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge"> Document .image-item { display: block; margin-bottom: 50px; /* 一定记得设置图片高度 */ height: 200px; }
"wrap">
"image-item" src="" src="data:images/1.jpg" alt="" /> "image-item" src="" src="data:images/2.jpg" alt="" />
"image-item" src="" src="data:images/3.jpg" alt="" />
"image-item" src="" src="data:images/4.jpg" alt="" />
"image-item" src="" src="data:images/5.jpg" alt="" />
"image-item" src="" src="data:images/6.jpg" alt="" />
"image-item" src="" src="data:images/7.jpg" alt="" />
"image-item" src="" src="data:images/8.jpg" alt="" />
"image-item" src="" src="data:images/9.jpg" alt="" />
"image-item" src="" src="data:images/10.jpg" alt="" />
// 首先获得页面当中所有的图片 let img = document.getElementsByTagName("img"); //存储图片加裁到的位置,避免每次都从第一 张图片开始遍历 let n = 0; //页面载入完毕加载可视区域内的图片 lazyload(); //注册滚动条滚动事件 window.onscroll = lazyload; //监听页面滚动事件 function lazyload() { //可见区域高度 let seeHeight = document.documentElement.clientHeight; /*滚动条距离顶部高度 * Chrome: document.body.scrollTop * FF: document.documentElement.scrollTop **/ let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for (let i = n; i < img.length; i++) { // 当前图片相对于页面顶部的距离 <= 可视区域+滚动条距离距离顶部的距离 if (img[i].offsetTop < seeHeight + scrollTop - 100) { //将img[i]的src设置 成img[i]的src if (img[i].getAttribute("src") == "") { img[i].src = img[i].getAttribute("src"); n = i + 1; } } } }
!DOCTYPE htmlhtml lang=\"en\"headmeta charset=\"UTF-8\"meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"script src=\"http://libs.baidu.com/jquery/2.0.0/jquery.min.js\"<>/scripttitle/titlestyle/style/headbodydiv >img class=\"image-item\" src=\"\" src=\"images/1.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/2.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/3.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/4.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/5.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/6.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/7.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/8.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/9.jpg\" alt=\"\" /img class=\"image-item\" src=\"\" src=\"images/10.jpg\" alt=\"\" //divscript img.length; i++) {\n // 当前图片相对于页面顶部的距离 >= 可视区域+滚动条距离距离顶部的距离\n if (img[i].offsetTop > seeHeight + scrollTop - 100) {\n //将img[i]的src设置 成img[i]的src\n if (img[i].getAttribute(\"src\") == \"\") {\n img[i].src = img[i].getAttribute(\"src\");\n n = i + 1;\n }\n }\n }\n }\n >/script/body/html
二、预加载
【2.1】什么是预加载?
提前加载图片,当用户需要查看时可直接从本地缓存中渲染
【2.2】为什么要预加载?
在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,直到所有内容加载完毕。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。
【2.3】预加载的优点
预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
【2.4】预加载实现方式
方法一:CSS方式实现预加载,隐藏在css的background的url属性里面
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
方法二:JavaScript实现预加载,通过javascript的Image对象设置实例对象的src属性实现图片的预加载
function preloadImg(url) { var img = new Image(); img.src = url; if(img.complete) { //接下来可以使用图片了 //do something here } else { img.onload = function() { //接下来可以使用图片了 //do something here }; }}
三、懒加载和预加载的对比
两者都是提高页面性能有效的办法,两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。
四、补充知识
【4.1】原生方法
document.body.clientWidth // body对象宽度 document.body.clientHeight // body对象高度 document.documentElement.clientWidth // 可见区域宽度 document.documentElement.clientHeight // 可见区域高度 document.body.clientWidth // 网页可见区域宽 document.body.clientHeight // 网页可见区域高 document.body.offsetWidth // 网页可见区域宽(包括边线的宽) document.body.offsetHeight // 网页可见区域高(包括边线的高) document.body.scrollWidth // 网页正文全文宽document.body.scrollHeight // 网页正文全文高 document.body.scrollTop // 网页被卷去的高 document.body.scrollLeft // 网页被卷去的左 window.screenTop // 网页正文部分上 window.screenLeft // 网页正文部分左 window.screen.height // 屏幕分辨率的高 window.screen.width // 屏幕可用工作区高度 window.screen.availHeight // 屏幕可用工作区高度 window.screen.availWidth // 屏幕可用工作区宽度 scrollHeight // 获取对象的滚动高度。 scrollLeft // 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth // 获取对象的滚动宽度 offsetHeight // 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度 offsetLeft // 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的计算左侧位置 offsetTop // 获取对象相对于版面或由父坐标offsetTop属性指定的父坐标的计算顶端位置 event.clientX // 相对文档的水平座标 event.clientY // 相对文档的垂直座标 event.offsetX // 相对容器的水平坐标 event.offsetY // 相对容器的垂直坐标 document.documentElement.scrollTop // 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop // 相对文档的水平座标+垂直方向滚动的量 // 屏幕可视窗口大小(兼容) window.innerHeight // 标准浏览器及IE9+ document.documentElement.clientHeight // 标准浏览器及低版本IE标准模式 document.body.clientHeight // 低版本混杂模式 // 浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离(兼容) window.pagYoffset // 标准浏览器及IE9+ document.documentElement.scrollTop // 兼容ie低版本的标准模式 document.body.scrollTop // 兼容混杂模式
【4.2】jQuery方法
$(window).height() // 浏览器时下窗口可视区域高度$(document).height() // 浏览器时下窗口文档的高度$(document.body).height() // 浏览器时下窗口文档body的高度$(document.body).outerHeight(true) // 浏览器时下窗口文档body的总高度 包括border padding margin$(window).width() // 浏览器时下窗口可视区域宽度$(document).width() // 浏览器时下窗口文档对于象宽度$(document.body).width() // 浏览器时下窗口文档body的高度$(document.body).outerWidth(true) // 浏览器时下窗口文档body的总宽度 包括border padding$(document).scrollTop(); //获取滚动条到顶部的垂直高度$(document).scrollLeft(); //获取滚动条到左边的垂直宽度
【4.3】直观图展示
jquery 当页面图片加载之后_图片的懒加载和预加载相关推荐
- 为什么ps图片打开是色块_图片加载 背景色块问题
就是CSS的加载和背景图片的加载不是同步的,尤其首次加载的时候,图片是异步的,具有明显的延迟,于是,我们会看到非常丑陋的色块在一瞬间出现了: 页面渲染流程如下,1. CSS加载:2. 对应DOM渲染, ...
- unity 异步加载网络图片_一个非常好用的AssetBundle资源加载器
Loxodon Framework Bundle是一个非常好用的AssetBundle加载器,也是一个AssetBundle冗余分析工具.它能够自动管理AssetBundle之间复杂的依赖关系,它通过 ...
- JAVA绘制图片原理_java开发_图片截取工具实现原理
先来看看效果: 测试一: 原图: 效果图: 测试二: 原图: 效果图: 代码部分: /** * */ package com.b510; import java.awt.rectangle; impo ...
- layui tree 加载慢_图片太多,加载慢,我用了layui里的方式,放在服务器后还是太慢!怎么解决???有没有什么优化的技巧???...
怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决??????? layui.use(['layer','flow ...
- sql文件加载出错_四十二、SparkSQL通用数据源加载(load)和保存(save)
SparkSQL能用数据加载(load)和保存(save) 对于Spark SQL的DataFrame来说,无论是从什么数据源创建出来的DataFrame,都有一些共同的load和save操作.loa ...
- java图片加气泡文字_图片加气泡文字
现在微信聊天少不了表情图片,这越有个性.独特的就越受大众喜爱,每每看到好看的图片时,大家也会忍不住收藏起来用.那你有没有想过自己P图呢?学一下PS图片创作一些独一无二的搞笑表情图,放在微信上秀秀吧,也 ...
- python给图片加半透明水印_图片添加半透明文字水印 Python
效果 python marker.py -f ./input/test.png -m '添加水印' 功能 使用知名python图片处理库PIL,为图片添加文字水印. 实现 步骤:根据文字生成水印图片: ...
- vue图片压缩不失真_图片压缩会失真?快试试这几个无损压缩神器。
前端通常在做网页的时候 会出现图片加载慢的情况 在这里我通常会将图片进行压缩 但是通常情况下 观众会认为 图片压缩会出现失真的现象 在这里我会向大家推荐几款图片压缩的工具 基本上会实现无损压缩 1.T ...
- java图像处理002---JAVA图片压缩_图片缩放_图片按照比例缩放_图片指定长宽缩放_Java使用google开源工具Thumbnailator实现图片压缩
JAVA技术交流QQ群:170933152 前言 作为靠谱的java服务端程序员,图片这个事情一直是个头疼的事情. 现在很多网站上,都有上传图片这个功能,而图片对于现在的很多手机来说,拍摄出来的都是高 ...
最新文章
- 深蓝学院第三章:基于卷积神经网络(CNN)的手写数字识别实践
- QT信号与槽——观察者模式——回调函数
- 软件工程概论 课堂练习 第2次作业3【酒店预订】
- leetcode491. 递增子序列(回溯算法)
- IEnumerable和IEnumerator详解
- AngularJS控制器和AngularJS过滤器的学习(3)
- JavaScript中的字面量
- codeforces 742D Arpa's weak amphitheater and Mehrdad's valuable Hoses ——(01背包变形)
- 管家婆请确认输入正确的服务器名,管家婆辉煌II软件登录提示连接失败请确认输入正确的服务器名...
- 《明朝那些事儿》读后感
- Linux 4G模块pppd拨号上网脚本解析
- 架构:短址(short URL)原理及其实现(短地址|短url)
- 遇到一点难题,请大拿帮忙看一下 万分感谢
- 【学习笔记】Python编程,从入门到实践(自学python心路历程及学习笔记整理)
- unity启动Logo大小的问题
- php 查找 中文,PHP查找中文字符的解决方案
- ETCD 简介及基本用法
- JAVA数组扁平化整合_一文搞定数组扁平化(超全面的数组拉平方案及实现)
- c++ pair 加减运算符重载
- 解决KINGDEE帐套清除工具遗留问题