懒加载与预加载

前端性能优化中图片资源的优化。

1.懒加载(延迟加载)

1.图片进入可视区域之后请求图片资源;

2.对于电商等图片较多,页面很长的业务场景很适用;

3.可以减少无效资源的加载;

4.并发加载的资源过多会阻塞js的加载,影响网站的正常使用;

懒加载的要点就是img标签src属性为空(占位图),给一个data属性,里面存放图片真实地址,在需要的时候,js动态的将这个地址赋予图片src属性。

如下所示:

<img src="" class="image-item" lazyload="true" data-original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />

类似上述代码所示,当需要时间,用js脚本控制图片的加载:

复制代码
var viewHeight = document.documentElement.clientHeight // 可视区域的高度function lazyload () {// 获取所有要进行懒加载的图片var eles = document.querySelectorAll('img[data-original][lazyload]')     //document.querySelectorAll(selector);返回与指定的选择器组(selector)匹配的文档中的元素列表;Array.prototype.forEach.call(eles, function (item, index) {var rectif (item.dataset.original === '')returnrect = item.getBoundingClientRect()// 图片一进入可视区,动态加载if (rect.bottom >= 0 && rect.top < viewHeight) {!function () {var img = new Image()img.src = item.dataset.originalimg.onload = function () {item.src = img.src}item.removeAttribute('data-original')item.removeAttribute('lazyload')}()}})
}
// 首屏要人为的调用,否则刚进入页面不显示图片
lazyload()document.addEventListener('scroll', lazyload)
复制代码

懒加载的优点

页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

2.预加载

预加载的核心要点如下:

1.提前加载图片,用户需要查看时从缓存中渲染;

3.对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验;

实现预加载主要有三个方法:

http://web.jobbole.com/86785/

1.html中img标签最初设置为display:none;

2.js脚本中使用image对象动态创建好图片;

3.使用XMLHttpRequest对象可以更加精细的控制预加载过程,缺点是无法跨域:

var xmlhttprequest = new XMLHttpRequest(); 
xmlhttprequest.open("GET",src,true);

转载于:https://www.cnblogs.com/zhuqs/p/8574692.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571079.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

8.使用Exists监控ZNode的三大Change事件

一、 zookeeper是一个分布式的协调程序&#xff08;所有程序都是通过订阅它来相互感知&#xff09;1. tcp&#xff08;长链接&#xff09; watcherserver -》clientclient -》server2. Driver 中的方法 exists() 监控一个znode的 CURD 的操作。client1 client2 同时订阅 baidu…

[SDOI2016]储能表

Description 有一个 n 行 m 列的表格&#xff0c;行从 0 到 n−1 编号&#xff0c;列从 0 到 m−1 编号。每个格子都储存着能量。最初&#xff0c;第 i 行第 j 列的格子储存着 (i xor j) 点能量。所以&#xff0c;整个表格储存的总能量是&#xff0c; 随着时间的推移&#xff0…

html对图片轮播脚本怎么调用,【jquery前端开发】可调整的幻灯片(图片轮播)

第一次写博客&#xff0c;希望接下来写的东西 或多或少能帮到些人&#xff0c;虽然这些东西都是一些大神前辈们写了无数遍的东西&#xff0c;但我尽量以一名小白的视角把代码写得清楚点&#xff0c;好心人的就给点赞吧。1.前期准备这是我们编写代码前必须要做的事&#xff0c;在…

计算机主机信息怎么看,本机电脑硬件配置信息怎么看?Win7/Win10查看详细电脑配置方法...

电脑配置决定了一台电脑的性能好坏&#xff0c;如果电脑配置没有达到游戏或者软件的要求&#xff0c;那么肯定无法流畅运行的。对于一些小白用户不知道如何查看电脑硬件配置&#xff0c;那么本机电脑硬件配置信息怎么看&#xff1f;下面装机之家小编分享一下Win7/Win10查看详细…

《Java技术》第一次作业

&#xff08;一&#xff09;、学习总结 1.在java中通过Scanner类完成控制台的输入&#xff0c;查阅JDK帮助文档&#xff0c;Scanner类实现基本数据输入的方法是什么&#xff1f;不能只用文字描述&#xff0c;一定要写代码&#xff0c;通过具体实例加以说明。 文本扫描类Scanner…

计算机主机开机为什么显示器不开,电脑开机后显示器不亮怎么办?电脑开机后显示器没反应的解决办法...

电脑开机后显示器不亮怎么办&#xff1f;电脑开机故障屡见不鲜&#xff0c;最近又有用户反馈开机问题了&#xff0c;一用户反馈说&#xff0c;电脑主机是可以正常开机的&#xff0c;但就是显示器不亮&#xff0c;这是怎么回事呢&#xff1f;出现这种情况可能是显示器或主机故障…

斯坦福-随机图模型-week4.0_

title: 斯坦福-随机图模型-week4.0 tags: note notebook: 6- 英文课程-9-Probabilistic Graphical Models 1: Representation --- 斯坦福-随机图模型-week4.0 最大期望收入模型 简答的决策 我们使用随机图模型进行决策需要的原料是什么ne ? 我们需要决策的情景一些列的可能的行…

计算机行业哪个会议论文最好,《第三次全国电子计算机专业学术会议论文选集》...

1964年12月&#xff0c;国防工业出版社出版了《第三次全国电子计算机专业学术会议论文选集》(以下简称《选集》)&#xff0c;由中国电子学会计算机专业委员会编辑&#xff0c;《选集》内容覆盖之广令人震惊。《选集》的内容表达了1961年以来国内计算技术在理论与实际方面的工作…

展开符和解构赋值

一、展开符展开符(剩余操作符)&#xff1a;...1.展开符号use strict; let arr_one [1,3]; let arr_two [4,5,...arr_one]; console.log(arr_one);//[ 1, 3 ] console.log(...arr_one);//1 3 console.log(arr_two);//[ 4, 5, 1, 3 ]2.剩余操作符&#xff08;类似arguments&…

2.1 linux C 进程与多线程入门--(1)进程和程序的区别

进程和程序的区别: j进程是活动的程序&#xff0c;而程序是一个代码的集合。进程是加载到内存中的程序&#xff0c;而程序没有加载到内存中&#xff0c;只是在磁盘上存储着。 1234567891011121314151617181920212223242526272829303132#include<sys/types.h>#include<…

计算机一级表格样式在哪儿,word表格样式在哪 word表格样式在哪里

word2007中设置好正文样式怎样设置表格样式1. 打开word(以2007为例)【开始】--> 【样式】&#xff0c;打开样式右下角的小箭头&#xff0c;或者alt shift ctrl S&#xff0c;打开全部式样 2. 在全部式样里&#xff0c;选择你要改的类型&#xff0c;点击该类型右边的下拉箭…

计算机辅助设计b实验目的,上海电力学院电路计算机辅助设计1--含有受控源电路辅助分析...

上海电力学院电路计算机辅助设计1--含有受控源电路辅助分析实验三&#xff1a;含有受控源电路辅助分析一、实验目的1. 用回路电流法和节点电压法求解电路中的电流和电压。 2. 掌握线性电路参数的测量的方法。3. 了解四种受控源元件(电流控制的电压源、电流控制的电流源、电压控…

计算机基本运行方式,我今天才知道的电脑运行方式,你知道吗?

计算机首先你必须是系统软件和应用软件的相互的结合&#xff0c;才能更好的开发出你电脑的应用平台&#xff0c;那么其实没有了软件系统&#xff0c;光有这些硬件&#xff0c;他能不能工作&#xff0c;其实是不能工作的电脑也就是废物一台。那么软件这些&#xff0c;就是合理的…

计算机修复画笔结果分析,Photoshop

Photoshop基础:使用修复画笔工具修复画笔工具和修补工具&#xff0c;其实都是基于我们前面所说的图章工具的派生工具&#xff0c;并弥补了图章工具的一些不足。那么图章工具有什么不足之处呢&#xff1f;通过前面的学习我们知道了图章工具对图案的复制是原样照搬的&#xff0c;…

服务器的虚拟化配置,怎么配置服务器的虚拟化环境

服务器虚拟化是科技发展的产物&#xff0c;使得在一台服务器上同时执行多个操作系统、提供服务成为可能&#xff0c;优化了企业内部资源&#xff0c;节省成本。服务器虚拟化是IT基础架构得以资源共享的做法&#xff0c;也是未来机房的重要元素之一&#xff0c;那我们怎么配置这…

qq游戏坦大战服务器维护中,高手教你如何解决QQ游戏问题

许多玩QQ游戏的朋友&#xff0c;可能会发现忽然有一天自己的QQ游戏进不去了&#xff0c;无法打开QQ游戏了&#xff0c;就算重装游戏也不行&#xff0c;出现“加载DLL失败”的提示。现将各种情况的DLL文件加载失败解决办法收集起来&#xff0c;希望能对大家有所帮助。1.加载cnsm…

华硕笔记本没有无线服务器,华硕笔记本连不上无线网络怎么解决

可能还有些网友不太清楚关于华硕笔记本连不上无线网络的问题&#xff0c;下面就由学习啦小编给你们介绍华硕笔记本连不上无线网络的解决方法吧&#xff0c;希望能帮到大家哦!华硕笔记本连不上无线网络的解决方法一&#xff1a;1、首先我们来检测是否是无线路由器的问题。为了确…

Maven知识点整理

Maven不仅是依赖管理工具&#xff0c;准确来说是一个项目管理工具&#xff0c;贯穿了整个项目生命周期&#xff0c;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布...依赖是使用Maven坐标来定位的&#xff0c;而Maven坐标 主要 由GAV&#xff08;groupId, artifactId, …

企业案例(二):增量恢复案例

1、环境准备 条件: 1.具备全量备份&#xff08;mysqldump&#xff09;。 2.除全量备份以外&#xff0c;还有全量备份之后产生的的所有binlog增量日志。 1.1、建立数据库和表 CREATE DATABASE dadong; USE dadong; CREATE TABLE test (id int(4) NOT NULL AUTO_INCREMENT,name c…

gdc服务器维修公司,gdc服务器阵列架坏了

gdc服务器阵列架坏了 内容精选换一换本章节指导用户批量创建4块云硬盘&#xff0c;并挂载至云服务器。进入云硬盘页面。关于创建云硬盘的详细操作&#xff0c;请参见“云硬盘用户指南”。本示例为批量创建4块云硬盘&#xff0c;具体参数如图1所示。云硬盘规格支持任意用户(root…