首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 11, 2014

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

其实实时加载图片思路很简单，页面一开始加载的时候把不需要一开始就加载的图片（如第二屏以下的图片，反正是要往下滚动才能看到的，不如把它们设置成往下滚动的时候再实时加载）路径保持到一个自定义的属性里，如：<img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" alt="19岁女孩直面癌症 7年前曾截肢" />，src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"是一个1px*1px的透明gif图片，自定义属性data-src里的"http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"才是图片的路径，往下滚动到它的时候把data-src里的值替换掉src的值，然后把data-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; background: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://pic.cnitblog.com/avatar/356740/20140716231521.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://e.hiphotos.baidu.com/image/w%3D310/sign=e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8a1cd11728b29fa.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><img class="aimg" src="http://h.hiphotos.baidu.com/image/w%3D310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aedd60735fae7cd34af.jpg" /></li>
<li><img class="aimg" src="http://g.hiphotos.baidu.com/image/w%3D310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd488d43f879427f9.jpg" /></li>
<li><img class="aimg" src="http://c.hiphotos.baidu.com/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c1cec3fdfc032346.jpg" /></li>
<li><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=75538617df54564ee565e23883de9cde/c2cec3fdfc039245ea8f5b0b8594a4c27d1e25ff.jpg" /></li>
<li><img class="aimg" src="http://d.hiphotos.baidu.com/image/w%3D310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2d2697cad1c8a7865d18.jpg" /></li>
<li><img class="aimg" src="http://a.hiphotos.baidu.com/image/w%3D310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a224577783c9ef76094b369a15.jpg" /></li>
<li><img class="aimg" src="http://g.hiphotos.baidu.com/image/w%3D310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c5066d016082431d3.jpg" /></li>
<li><img class="aimg" src="http://f.hiphotos.baidu.com/image/w%3D310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e81d13883b01213fb80e91aa.jpg" /></li>
<li><img class="aimg" src="http://b.hiphotos.baidu.com/image/w%3D310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da38292df5e1fe7fa6.jpg" /></li>
<li><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2d2c738bd4b21ce56a.jpg" /></li>
<li><img class="aimg" src="http://a.hiphotos.baidu.com/image/w%3D310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b801145e.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" alt="19岁女孩直面癌症 7年前曾截肢" /></a></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=655bcf71d31373f0f53f699e940f4b8b/86d6277f9e2f07089c207d0aeb24b899a901f297.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a786c917d4016968cb3d70cf3bc75764.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=8c009502257f9e2f70351b092f31e962/9922720e0cf3d7ca56401892f01fbe096a63a99b.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=f62f43b6ab773912c4268360c8198675/a1ec08fa513d269759c20d5657fbb2fb4316d8a3.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=9ce0b545a918972ba33a06cbd6cc7b9d/a8773912b31bb051b4ef3a79347adab44bede09c.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=9d833f1b950a304e5222a6fbe1c9a7c3/d1160924ab18972bb49b4bd5e4cd7b899e510a0f.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252dd42a007e1c62013b5bb5c8eab887.jpg" /></li>
</ul>
</div>
<div class="cont3 wp">
<h2>cont3</h2>
<ul>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=71556df3d2160924dc25a41ae406359b/f703738da977391274b38fc4fa198618377ae2fa.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a49fbfbedab641b0b.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=3749c38a4334970a4773162ea5cbd1c0/5366d0160924ab1808b1ea9237fae6cd7a890beb.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=8563bf5757fbb2fb342b5e137f4b2043/3b87e950352ac65cccb5d179f9f2b21193138a0c.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=74856b065e6034a829e2be80fb1249d9/d000baa1cd11728baab06e25cafcc3cec3fd2c1c.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://c.hiphotos.baidu.com/image/w%3D310/sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c81800a19d88e30c90831fa828ba61e468f.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbb2fb43166d22e4c8ab9d442309f79052d278.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=5077c2c2c1cec3fd8b3ea174e689d4b6/4afbfbedab64034f9195fd08adc379310a551d67.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=50bdad348418367aad8979dc1e728b68/3c6d55fbb2fb43168dce1a6722a4462308f7d3de.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" /></li>
<li><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.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; background: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://pic.cnitblog.com/avatar/356740/20140716231521.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" width="310" height="428" />
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" width="310" height="419" />
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.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://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.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图片实时加载提供网页打开速度

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
jquery 手势密码插件
Mar 17 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 #Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 #Javascript
sogou地图API用法实例教程
Sep 11 #Javascript
当前流行的JavaScript代码风格指南
Sep 10 #Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 #Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 #Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 #Javascript
介绍信(57) 心得体会(660) 道歉信(39) 表扬信(62) 检讨书(456) 演讲稿(869) 欢迎词(65) 证婚词(21) 邀请函(127) 辞职信(98)
You might like
详解PHP中的Traits
2015/07/29 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
详解Vue.js——60分钟组件快速入门（上篇）
2016/12/05 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
python中的闭包函数
2018/02/09 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python 并发下载器实现方法示例
2019/11/22 Python
python多进程并发demo实例解析
2019/12/13 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
用python绘制樱花树
2020/10/09 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
德国最大的拼图在线商店：Puzzle.de
2016/12/17 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
英文升职感谢信
2015/01/23 职场文书
工会积极分子个人总结
2015/03/03 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS