下载文档原格式
javascript实现图⽚延迟加载⽅法汇总（三种⽅法）看到⼀些⼤型⽹站，页⾯如果有很多图⽚的时候，当你滚动到相应的⾏时，当前⾏的图⽚才即时加载的，这样⼦的话页⾯在打开只加可视区域的图⽚，⽽其它隐藏的图⽚则不加载，⼀定程序上加快了页⾯加载的速度，对于⽐较长的页⾯来说，这个⽅案是⽐较好的。
原理是这样：页⾯可见区域以下的图⽚先不加载，等到⽤户向下滚动到图⽚位置时，再进⾏加载。
这样做的好处在哪⾥？——当页⾯有好⼏屏内容时，有可能⽤户只看前⼏屏的内容，这样我们就可以只加载⽤户需要看的图⽚，减少服务器向⽤户浏览器发送图⽚⽂件所产⽣的负荷，下⾯通过三种⽅法给⼤家介绍js实现图⽚延时加载。
js实现图⽚延迟加载⽅法⼀：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>lazyImage2.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--></head><body style="text-align:center" mce_style="text-align:center"><p> </p><p> </p><p> </p><p> </p><p> </p><div style="height:1290px;width:800px;border:1px;background:gray;"></div><div style="height:150px;width:800px;border:1px;background:green;"></div><img class="lazy" src="images/sprite.gif" mce_src="images/sprite.gif" alt="images/lazyloadImg.jpg" /><script type="text/javascript"><!--var temp = -1;//⽤来判断是否是向下滚动（向上滚动就不需要判断延迟加载图⽚了）window.onscroll = function() {var imgElements = document.getElementsByTagName("img");var lazyImgArr = new Array();var j = 0;for(var i=0; i<imgElements.length; i++) {if(imgElements[i].className == "lazy"){lazyImgArr[j++] = imgElements[i];}}var scrollHeight = document.body.scrollTop;//滚动的⾼度var bodyHeight = document.body.offsetHeight;//body（页⾯）可见区域的总⾼度if(temp < scrollHeight) {//为true表⽰是向下滚动，否则是向上滚动，不需要执⾏动作。
【前端优化】图⽚延迟加载Lazy-loading的原理与简单实现1.什么是lazy-loading图⽚“懒加载”为img标签src设置统⼀的图⽚链接，⽽将真实链接地址装在⾃定义属性中。
所以开始时候图⽚是不会加载的，我们将满⾜条件的图⽚的src重置为⾃定义属性便可实现延迟加载功能2.实现⽅法思想其实很简单，就是当图⽚相对于视⼝的距离⼩于视⼝⾼度的时候就置换图⽚的src！⽽图⽚的相对于视⼝的距离⽤getBoundingClientRect()简直so easy。
3.demo代码<!DOCTYPE html><html><head><title>lazy loading</title><style type="text/css">img {display: block;margin: 600px 100px;}</style></head><body><div class="zone"><img width="612" height="612" data-src="/7060/6969705425_0905bf6bba_o.jpg" src="img/loading.png" class="lazy"><img width="612" height="612" data-src="/7203/6969484613_0ee3af0144_o.jpg" src="img/loading.png" class="lazy"><img width="612" height="612" data-src="/7207/6821596428_cdae70e306_o.jpg" src="img/loading.png" class="lazy"><img width="612" height="612" data-src="/7037/6965140403_9fbb5e7f96_o.jpg" src="img/loading.png" class="lazy"></div><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(function() {function loadImage (el, fn) {src = el.getAttribute('data-src');el.src = src;fn? fn() : null;}function elementInViewport(el) {var rect = el.getBoundingClientRect()return (rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight))}var query = $('.lazy'),images = new Array(),processScroll = function() {for (var i = 0; i < images.length; i++) {if (elementInViewport(images[i])) {loadImage(images[i], function() {images.splice(i, 1);console.log(images.length)});}};};for (var i = 0; i < query.length; i++) {images.push(query[i]);};window.addEventListener('scroll', processScroll);})</script></body></html>4.问题与优化于是功能便实现了，但是其实也有很多问题，⽐如打开页⾯，然后⼜点去别的窗⼝，看了部av回来后本以为这个页⾯图⽚已经缓冲好了结果尼玛啊拉下去还是要重新加载....所以需要判断这种情况，今天没时间了以后再针对这个写⼀下吧。
js延迟加载改变JS的位置加快⽹页加载速度当⼀个⽹站有很多js代码要加载，js代码放置的位置在⼀定程度上将会影像⽹页的加载速度，为了让我们的⽹页加载速度更快，本⽂总结了⼀下⼏个注意点：复制代码代码如下:<script type=”text/javascript” src=”" id=”my”></script><script type=”text/javascript”>setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延时3秒</script>这样通过延迟加载js代码，给⽹页加载留出更多的时间！在需要插⼊JS的地⽅插⼊以下代码:程序代码复制代码代码如下:<span id=”L4EVER”>LOADING…</span>当然,那个LOADING…你可以换成⾃⼰喜欢的⼩图⽚.看起来很有AJAX效果呢.然后在页⾯最底端插⼊:程序代码复制代码代码如下:<span id=”AD_L4EVER”>你的JS代码在这⾥!</span ><script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>这个牵涉到⽹页的加载顺序问题，例如引⼊外部js脚本⽂件时，如果放⼊html的head中,则页⾯加载前该js脚本就会被加载⼊页⾯，⽽放⼊body中，则会按照页⾯从上倒下的加载顺序来运⾏javascript的代码~~~ 所以我们可以把js外部引⼊的⽂件放到页⾯底部，来让js最后引⼊，从⽽加快页⾯加载速度。
divcss网页图片延迟加载的方法
我们常常会见到很多网页的图片并不是一打开页面就全部加载的，而是浏览到当前的图片位置才显示出来。
这是怎幺实现出来的呢？大家知道divcss网页图片延迟加载吗?我们积累了一些经验，在此拿出来与大家分享下。
第一步：下载jQuery的程序包，我在网页下面已经提供修改过的，绝对的可用。
适应各个版本的浏览器，还有手机浏览器
第二步，将下载的文件解压放到一个js目录里面
/js/lazyload/grey.gif
/js/lazyload/jquery.js
/js/lazyload/zyload.js
然后在需要用到特效的模板页面中，加上以下调用代码
我的建议是放在head前的最后一行
路径地址自己更改，根据自己模板中的相应规则
第三步：修改zyload.js文件
找到.context img
这个说明下，看仔细了
其中如果去掉.context就剩下img是延迟加载所有图片，根据不同模板作相应改动，比如我这个模板，我只需要内容里的图片延迟加载，所以改
成.context
img，这样只延迟加载.context容器内的图片，否则可能影响到其他图片的加载;。
抄代码｜帝国cms zyload.js实现图片延迟懒加载极简方法如果你对网站速度优化有一定了解，或者你是用过百度统计提供的网站速度诊断工具的网站管理者，会知晓一件事：一个网站页面图片过多的话，加载时会导致网页打开变慢，甚至看得见“卡顿”的现象。
这不仅会影响用户的浏览体验，也会影响到搜索引擎对网站的优劣评判及seo。
（如上图所示，相比于js等文本类文件，三个红色标注的图片文件，就算kb更小，加载时间亦要久很多）对于较大型的、有专业程序员配置的网站运营者来说，为网站中的图片实现惰性加载(专业术语，俗称为延迟加载，懒加载)，是一件正常不过的事。
毕竟，懒加载不是什么新技术，好几年前就已经在较大的互联网站普及了。
那问题来了：什么是懒加载？答：懒加载是一种网页交互呈现效果。
通常而言，首次只加载第一屏（能看得见的）的图片，之后的图片则不加载（或只加载一个文件容量特别小的图片，称为占位图），如果用户拖动滚动条至后面某处位置（这处位置称为可视区域）则再加载图片，这样做的好处是避免网页因加载图片过多而打开慢的弊端。
两个字，提速！如果网站图片多，要提速，那懒加载就是web技术层面的标配。
提升网站页面加载速度，利于seo提升——懒加载好处看上去很多，只是要如何具体地用在自己的网站上呢？对于没有专业程序员参与的网站运营管理者来说，要实现懒加载并不是那么容易。
网上有一些教程，厉害的高手是自己写原生js来解决，更多快捷解决方案是使用zyload.js插件，有示例代码及演示（请自行搜索或参见此处链接），这个插件的使用并不难，如果是从零开始构建一个页面，直接套用是没有问题的，可是要套用在帝国cms制作好的网站里，得用什么方式方法呢？经过在学而行营销网的实践摸索，以下是帝国cms结合zyload.js 实现图片延迟懒加载的极简解决方法。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－首先，要下载zyload.js的迷你压缩版，此js文件相当小，只有2k大小。
前端开发中的图片延迟加载实现方法在现代互联网时代，网页的速度和性能优化是前端开发者关注的焦点之一。
而图片延迟加载就是一种常见的优化手段，它使得网页在加载图片时不会阻塞其他资源，提高页面的加载速度和用户体验。
一、为什么要使用图片延迟加载随着互联网的发展，网页中的图片越来越多，而图片资源的加载速度却始终无法与带宽的增长相匹配。
当页面中存在大量高分辨率图片时，网页的加载时间会明显增加，导致用户等待的时间过长，降低用户的整体体验。
而图片延迟加载的概念就是在页面初次加载时，只加载可视区域内的图片，待页面滚动到相应位置时才加载其他图片资源。
这种方法能够极大地减少页面的加载时间，提升用户的体验。
二、常用的图片延迟加载实现方法1. Lazy LoadingLazy Loading是一种常见的图片延迟加载技术，它通过将图片的src属性设置为一个占位符（如一张loading图），而将图片的真实路径存放在自定义的data-src 属性中。
当页面滚动到图片位置时，通过监听滚动事件来判断何时加载图片，然后将data-src的值赋给src属性，从而实现图片的延迟加载。
通过使用Lazy Loading，不仅可以提高网页的加载速度，还能减少对服务器的请求次数，节省带宽和服务器资源。
2. Intersection Observer APIIntersection Observer API是HTML5新增的一个API，它可以监听元素进入和离开可视区域的事件。
借助这个API，可以更加高效地实现图片的延迟加载。
具体实现方法是，通过创建一个IntersectionObserver对象，然后指定需要监听的元素和触发时的回调函数。
当被监听的元素进入或离开可视区域时，回调函数就会被触发，从而实现图片的延迟加载。
相比于传统的滚动事件监听，Intersection Observer API具有更好的性能和更简洁的使用方式，是现代前端开发中推荐使用的图片延迟加载实现方法。
前端开发中的图片懒加载技术实现懒加载技术是前端开发中常用的一种优化技术，它能够延迟加载页面中的图片，从而提高页面的加载速度和性能。
在现代的网页设计中，图片通常是页面中最大的资源之一，并且经常会延迟页面的渲染速度，给用户带来不好的体验。
因此，使用懒加载技术可以很好地提高用户的体验。
懒加载技术的实现原理很简单，即将页面上需要加载的图片进行延迟加载，直到用户的视口进入到该图片所在的区域，才开始加载图片。
这样可以大大减少页面的加载时间和网络带宽的消耗。
下面将介绍一种常见的懒加载技术实现方法。
首先，在HTML中将需要懒加载的图片的src属性设为空，例如:<img src="" data-src="路径/图片.jpg">然后，在JavaScript中监听页面滚动事件，判断需要懒加载的图片是否出现在用户的视口中。
当图片出现在视口中时，将其data-src属性的值赋给src属性，实现图片的加载。
代码示例:window.addEventListener('scroll', function() {var lazyImages = document.querySelectorAll('img[data-src]');lazyImages.forEach(function(image) {if (isElementInViewPort(image)) {image.src = image.dataset.src;image.removeAttribute('data-src');}});});isElementInViewPort函数用来判断元素是否出现在视口中，可以通过获取元素的位置和窗口的大小来计算判断。
如果元素的top小于窗口的bottom且元素的bottom大于窗口的top，则元素在视口中。
除了懒加载图片的方式外，还可以通过其他方式来补充优化，例如使用背景图片在CSS中实现。
前端开发中如何实现图片预加载在现代的网站和应用程序中，图片加载是不可或缺的一部分。
然而，在加载大量图片时，用户可能会遇到长时间等待的问题，这会影响用户体验和页面响应速度。
为了解决这个问题，前端开发人员可以采用图片预加载技术来优化页面加载速度。
下面将详细介绍如何在前端开发中实现图片预加载。
1. 预加载的概念图片预加载是指在图像出现在用户视线范围内之前，提前将其加载到内存中，以确保用户能够快速浏览到图片内容。
通过预加载图片，可以减少用户等待时间，提高用户体验。
2. 使用JavaScript进行图片预加载使用JavaScript进行图片预加载是一种常见的方法。
以下是具体的实现步骤：步骤一：创建一个数组，用于存储需要预加载的图片地址。
```javascriptvar imageUrls = ['image1.jpg','image2.jpg','image3.jpg'];```步骤二：创建一个计数器，用于记录已预加载的图片数量。
```javascriptvar loadedCount = 0;```步骤三：创建一个函数，用于加载图片。
每次加载完成后，计数器加一。
```javascriptfunction loadImage(url) {var image = new Image();image.onload = function() {loadedCount++;if (loadedCount === imageUrls.length) {// 所有图片加载完成后执行的操作}};image.src = url;}```步骤四：遍历图片数组，调用加载图片函数。
```javascriptfor (var i = 0; i < imageUrls.length; i++) {loadImage(imageUrls[i]);}```通过以上步骤，便可以实现图片的预加载。
目录
目录 (1)
1.什么是图片懒加载 (1)
2.为什么要使用图片懒加载 (1)
3.图片懒加载实现方式 (2)
1.先准备些图片标签 (2)
2.默认处于可视化区域内的图片先显示出来 (2)
3. 给window力口一个滚动事件 (3)
4.给img设置透明和过渡 (3)
5.完整代码 (4)
1.什么是图片懒加载
我们知道了浏览器加载img是很耗费资源的，还有带宽，而且还有一个特点就是如果没有设置img的src属性，就不会消耗这些资源。
所以图片懒加载就是默认先不设置img的src属性，而是等需要显示这张图片时再去设置其src将其显示出来，这就是图片懒加载。
2.为什么要使用图片懒加载
优化性能
3.图片懒加载实现方式
1 .先准备些图片标签
2 .默认处于可视化区域内的图片先显示出来
3 .给window加一个滚动事件
然后给window加一个滚动事件，在事件里面通过循环获取哪些即将显示在可视化容器里面的元素，当其即将显示时就给他设置src 的值。
【滚出来了就显示】
4 .给img设置透明和过渡
为了效果更好看点，可以默认把所有的图片全部设置为透明opacity:0，然后等要显示了就设置为opacity:1,同时加上过渡属性transition: 2s;这样显示时还会有特殊的效果。
5 .完整代码。
Jquery图⽚延迟加载插件zyload.js的使⽤⽅法最新版的zyload.js已不再是伪的延迟加载了⼀、请按照基本使⽤⽅法说明设置复制代码代码如下://载⼊JavaScript ⽂件<script src="jquery.js" type="text/javascript"></script><script src="zyload.js" type="text/javascript"></script>复制代码代码如下://img标签的4个属性⼀个都不能少，否则不能实现延迟加载的效果，如下：<img class="lazy" data-original="img/example.jpg" width="640" height="480">复制代码代码如下://使⽤$(function() {$("zy").lazyload();});⼆、常⽤属性说明复制代码代码如下:threshold : 200 //设置灵敏度，表⽰进⼊显⽰区域还有200像素就开始加载effect : "fadeIn" //使⽤淡⼊特效failure_limit : 10 //容差范围，⼀定要设置此值，原因说明请参考原⽂档container: $("#container") //使⽤⽗容器，⽗容器的CSS样式⾄少应包含"height: 600px;overflow: scroll;"两个属性event : "click" //修改触发事件为单击三、参考。
大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。
实现原理
把所有需要延时加载的图片改成如下的格式：
<img lazy_src="图片路径" border="0"/>
然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）
代码
lazyLoad=(function() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar(tags) {
doc_body = document.body;
doc_element = patMode == 'BackCompat' ? doc_body: document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
function initElementMap() {
var all_element = [];
//从所有相关元素中找出需要延时加载的元素
for (var i = 0,
len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j < len2; j++) {
if (typeof(el[j]) == "object" && el[j].getAttribute("lazy_src")) {
element_obj.push(all_element[key]);
}
}
}
for (var i = 0,
len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);//得到图片相对document的距上距离
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//按距上距离保存一个队列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;//需要延时加载的图片数量
}
}
};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop: doc_element.scrollTop;
//可视化区域的offtset=document的高+
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
}
delete map_element[key];
download_count--;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();
使用方法：把页面上需要延时加载的图片src改成为lazy_src，然后把上面的js放到body最后面，然后调用：lazyLoad.init();
调试的方法可以使用firebug来查看一时图片是否是延时加载。
另外：
如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：
///切换内容的代码...
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$(this).removeAttr("init_src");
});
---★本文转摘自『IT学习者』→file:///E:/技术/JS实例网页上图片延迟加载的JS代码-ajax-IT学习者.mht
---★本文转摘自『IT学习者』→file:///E:/技术/JS实例网页上图片延迟加载的JS代码-ajax-IT学习者.mht。
