来自 关于计算机 2019-09-04 19:50 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

纯javascript实现图片延时加载方法,js图片实时加

最近开始整理一些以前写的好用的插件,…^-^!!!

js图片实时加载提供网页打开速度,js实时

浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高。以下是笔者目前所想到的思路,如果有更好的思路,望不吝赐教。

其实实时加载图片思路很简单,页面一开始加载的时候把不需要一开始就加载的图片(如第二屏以下的图片,反正是要往下滚动才能看到的,不如把它们设置成往下滚动的时候再实时加载)路径保持到一个自定义的属性里,如:<img class="aimg" src="" data-src="" alt="19岁女孩直面癌症 7年前曾截肢" />,src="

如下是demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片实时加载</title>
<style>
*{padding:0; margin:0;}
.wp{width:1000px; margin:5px auto; padding:10px 0; border-bottom:1px solid #dedede; overflow:hidden;}
ul li{ display:block; width:250px; float:left; margin:5px 0; list-style:none;}
.aimg{ display:block; height:300px; max-width:348px; border:1px solid #EEE; backgroundnull:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;}
</style>
</head>
<body>
<div class="wp">
<a href="http://www.cnblogs.com/xiaomou2014"><img src="http://www.bkjia.com/uploads/allimg/140913/0111034010-3.png" alt="xiaomou2014的头像"></a>
<a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
cont2开始的图片是实时加载的
</div>
<div class="cont1 wp">
<h2>cont1</h2>
<ul>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111035X7-4.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111033321-5.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/011103AU-6.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111033052-7.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/01110314D-8.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111035O0-9.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111034115-10.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/011103N50-11.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/011103C25-12.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111034M6-13.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111032161-14.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111032934-15.jpg" /></li>
</ul>
</div>
<div class="cont2 wp">
<h2>cont2</h2>
<ul>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111035423-1.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033404-19.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033025-21.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111036101-23.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111034142-25.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111034Q8-27.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111036252-29.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111031355-31.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033M1-33.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/01110350W-35.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111032138-37.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111036406-39.jpg" /></li>
</ul>
</div>
<div class="cont3 wp">
<h2>cont3</h2>
<ul>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111032K3-41.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033341-43.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111035317-45.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111034151-47.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/011103Ia-49.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/01110322U-51.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111032559-53.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111034215-55.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111031L8-57.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111035920-59.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111032R9-61.jpg" /></li>
<li><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033529-63.jpg" /></li>
</ul>
</div>

<script>
//兼容IE对getElementsByClassName
if (navigator.appName == 'Microsoft Internet Explorer') {
document.getElementsByClassName = function() { 
var tTagName = "*"; 
if (arguments.length > 1) { 
tTagName = arguments[1]; 
} 
if (arguments.length > 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = pObj.getElementsByTagName(tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i < objArr.length; i++) { 
if (objArr[i].className == arguments[0]) { 
tRObj.push(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//图片加载
function loadImg(imgClass,imgSrc){
//data-src:存放需要加载的图片的路径
var arrImg=document.getElementsByClassName(imgClass); //需要实时加载class为imgClass的图片数组
window.onscroll=function(){
for(var i=0; i<arrImg.length; i++){
if(!arrImg[i].getAttribute(imgSrc)) continue; 
if(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight >arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
}
loadImg("aimg","data-src");
</script>
</body>
</html>

如上demo里的cont1里的图片是一加载页面就显示的,对于首页布局是固定的,可以确认那些图片是第二屏以下的,但是对于内容页,主体内容容器里的图片出现的位置是不可控制的,这就需要加载完毕真个页面的时候再判断是不是在在可视范围内,如果是在可视范围内就把它加载出来(当然,首页也可这么做,但是如果网速很慢,那么打开首页的时候要等到整个页面架构加载完毕之后才显示图片,而不是从上而下加载出来),图片要设置width与height属性,这让它在页面占一个位置,不然为加载前它只占透明gif图片的大小位置。

如下demo针对内容页做了一点修改,window.onload、window.onscroll的时候都触发加载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片实时加载</title>
<style>
*{padding:0; margin:0;}
.wp{width:1000px; margin:5px auto; padding:10px 0; border-bottom:1px solid #dedede; overflow:hidden;}
.fl{width:700px; padding:25px; float:left; border:1px solid #dedede; line-height:40px; overflow:hidden;}
.fr{width:220px; height:800px; float:right; background-color:#dedede;}
.aimg{ display:block; max-width:700px; margin:0 auto; backgroundnull:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;}
</style>
</head>
<body>
<div class="wp">
<a href="http://www.cnblogs.com/xiaomou2014"><img src="http://www.bkjia.com/uploads/allimg/140913/0111034010-3.png" alt="xiaomou2014的头像"></a>
<a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
</div>
<div class="wp">
<div class="fl">
<h2>7年前截肢的19岁癌症晚期女孩</h2>
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111035920-59.jpg" width="310" height="428" />
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111032R9-61.jpg" width="310" height="419" />
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033529-63.jpg" width="310" height="428" />
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111035423-1.jpg" alt="19岁女孩直面癌症 7年前曾截肢" width="640" height="480" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033404-19.jpg" alt="19岁女孩直面癌症 7年前曾截肢" width="640" height="872" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111033025-21.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111036101-23.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7年前截肢的19岁癌症晚期女孩" target="_blank" ><img class="aimg" src="http://www.bkjia.com/uploads/allimg/140913/0111031346-0.gif" data-src="http://www.bkjia.com/uploads/allimg/140913/0111034142-25.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a>
</div>
<div class="fr">
</div>
</div>

<script>
//兼容IE对getElementsByClassName
if (navigator.appName == 'Microsoft Internet Explorer') {
document.getElementsByClassName = function() { 
var tTagName = "*"; 
if (arguments.length > 1) { 
tTagName = arguments[1]; 
} 
if (arguments.length > 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = pObj.getElementsByTagName(tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i < objArr.length; i++) { 
if (objArr[i].className == arguments[0]) { 
tRObj.push(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//图片加载
function loadImg(imgClass,imgSrc){
//data-src:存放需要加载的图片的路径
var arrImg=document.getElementsByClassName(imgClass); //需要实时加载class为imgClass的图片数组
for(var i=0; i<arrImg.length; i++){
if(!arrImg[i].getAttribute(imgSrc)) continue; 
if(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight >arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
window.onload=window.onscroll=function(){loadImg("aimg","data-src")}

</script>
</body>
</html>

随着页面信息越来越丰富饱满,尤其像淘宝,京东之类的购物网站,首页就是他们的生命线,- -||||

怎查看网页每一部分的加载速度,比如图片,js,css文件的加载速度

  比较好用的有:火狐浏览器,安装插件 firebug 插件 ,
  在火狐浏览器的 工具里面,

  搜索 firebug 然后安装

  然后 打开你要查询的网站
  按f12

  还有其他功能,挺好用的

图片 1  

最近在做某银行的网站,只有挤上首页才能得到更多的关注,于是乎各种业务人员就开始了首页位置之争,为了平息他们的战乱。体现我大度包容的一面 ,啊哈哈哈

网页设计中 JS文件比较多,影响网页的加载速度,怎解决

兼容模式实际是兼容IE7的,360“极速”实际就是Chrome。
你的问题应该是“页面 渲染 慢”,是布局不合理,
1. 全部页面的css样式文件都合并成一段代码,压缩后放到<style>中,这个<style>页面只能存在一个并且必须在<head>中

  1. 页面的所有 <script>不管是外部文件,还是内部嵌套,都放到 </body> 之前。(<body>结束标签)
    如果<script>标签的位置移动不了,就改js,务必要放到页面的最后。
    比如<script>中有document.write();可以预先在指定位置放一个隐藏的<div>,
    然后通过页面底部的js,innerHTML到<div>中。
    3. 最好把小的零碎的js代码都合并到一个文件中。但是单个js文件也不要太大,一般不超过25k。

这几点做到了,你页面的首屏速度能在1秒左右。(1秒已经很快了,没几个能达到1秒的)。
具体为什么就不在这里解释了。  

浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚...

首页囊括了他们全部的需求,他们满意的走人了,结果技术经理来了,说首页加载怎么这么大,于是乎,减!!!

首当其冲,缩小图片K数,不够,那怎么办,好吧,进入正题。长页面未显示的部分可以先不加载,省流量就是省钱,开搞!!!

思路就是,判断图片在页面中的位置,如果图片的位置大于小于当前的屏幕高度,那么显示图片,否则隐藏图片。

怎么一开始隐藏图片呢,很简单,<img csii_src="1.png">,给一个浏览器不认识的属性csii_src,当需要显示图片的时候在element.src=element.getAttribute("csii_src");,思路很简单吧,上代码了。

function lazyLoad() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body = null;
var doc_element = null;
var lazy_load_tag = [];
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body
: document.documentElement;
lazy_load_tag = tags || [ "img", "iframe" ];
}
;
function initElementMap() {
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("csii_src")) {
element_obj.push(el[j]);
}
}
}

for ( var i = 0, len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);
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;*/
var offset;
if(os.firefox){
offset = doc_element.scrollTop;
}else{
offset = doc_body.scrollTop;
}

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 + 20;
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("csii_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();
$(window).scroll(function(){
initDownloadListen();
});
}
;
init();
}

不足之处,页面结构必须已定好,图片的高度必须设置好,不然,无法计算图片距离顶部的高度。需注意。

我们再来看下另外一个小伙伴是如何实现的

<!-- 
      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表示是向下滚动,否则是向上滚动,不需要执行动作。 

       for(var k=0; k<lazyImgArr.length; k++) { 
       var imgTop = lazyImgArr[k].offsetTop;//1305(图片纵坐标) 
       if((imgTop - scrollHeight) <= bodyHeight) { 
        lazyImgArr[k].src = lazyImgArr[k].alt; 
        lazyImgArr[k].className = "notlazy" 
               } 
      } 

      temp = scrollHeight; 
     } 

    }; 

// -->

思路如下:先在<img>标签中将src的值设置为一个极小的图片文件路径,alt属性的值设置为真正要显示的图片文件路径,当向下滚动到图片的位置时,将src的值替换为alt的值,这样就会自动加载真正要显示的图片了,同时,给标签设置一个值为lazy的class,加载完了之后,将其值设置为notlazy,以此来判断哪些图片需要加载,哪些不需要。

代码中的注释已经很清楚了,各位自己慢慢看吧。欢迎扔砖,更欢迎各种改进和完善的建议。

您可能感兴趣的文章:

  • 一段实现页面上的图片延时加载的js代码
  • 网页图片延时加载的js代码
  • JS图片根据鼠标滚动延时加载的实例代码
  • javascript实现iframe框架延时加载的方法
  • 原生javaScript实现图片延时加载的方法
  • 原生javascript实现图片滚动、延时加载功能
  • js实现网页图片延时加载 提升网页打开速度

本文由六合联盟网发布于关于计算机,转载请注明出处:纯javascript实现图片延时加载方法,js图片实时加

关键词: