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>
Javascript 相关文章推荐
jquery的键盘事件修改代码
Feb 24 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JavaScript中reduce()的用法
May 11 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
You might like
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python 装饰器深入理解
2017/03/16 Python
python方向键控制上下左右代码
2018/01/20 Python
python实现剪切功能
2019/01/23 Python
超简单的Python HTTP服务
2019/07/22 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
如何写自我鉴定
2014/03/19 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
毕业证明模板
2015/06/19 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis