-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.json
1 lines (1 loc) · 13.6 KB
/
content.json
1
[{"title":"宫崎骏与你的名字","date":"2017-03-03T10:36:15.000Z","path":"2017/03/03/宫崎骏与你的名字/","text":"宫崎骏与日本动画的不解之缘宫崎骏1963年进入东映动画公司，1985年与高畑勋共同创立吉卜力工作室。2013年9月6日宣布“引退”。基本信息中文名宫崎骏外文名MiyazakiHayao别名秋津三朗国籍日本星座摩羯座血型O型血出生地日本东京出生日期1941年1月5日其他成就创立吉卜力工作室、1994年日本漫画家协会奖 、第75届奥斯卡最佳动画长篇奖 、第62届威尼斯电影节“荣誉金狮奖 、2012年度日本“文化功劳者”称号、第87届荣誉奥斯卡终身成就奖职业动画导演、编剧作家毕业院校日本东京学习院大学其他作品《千与千寻》《哈尔的移动城堡》、《幽灵公主》 《风之谷》获奖 2 次，提名 4 次，获奖效率值：33% 虽然宫崎骏退休是功德圆满没有遗憾了，直到新海诚的《你的名字》上映。。。。。。 你的名字 此时应该有bgm~宫崎骏双眼突然有了神采，快！扶我起来~","tags":[{"name":"yourname","slug":"yourname","permalink":"http://yoursite.com/tags/yourname/"}]},{"title":"延迟加载","date":"2017-03-03T08:38:23.000Z","path":"2017/03/03/延迟加载/","text":"javascript实现图片延迟加载方法汇总(三种方法)看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处在哪里？——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷，下面通过三种方法给大家介绍js实现图片延时加载。 js实现图片延迟加载方法一：1234567891011121314151617181920212223242526272829303132333435363738394041<!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表示是向下滚动，否则是向上滚动，不需要执行动作。 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; } }; // --></script> </body> </html> js实现网页图片延时加载方法二：再没贴代码之前先给大家讲下js实现图片延时加载的原理。 实现原理：把所有需要延时加载的图片改成如下的格式：?然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）： JS代码：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100lazyLoad = (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 = document.compatMode == '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来查看一时图片是否是延时加载。另外：如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：///切换内容的代码…```javascriptchlid.find(\"img[init_src]\").each(function(){ $(this).attr(\"src\",$(this).attr(\"init_src\")); $(this).removeAttr(\"init_src\"); }); 原生态js实现图片延时加载方法三：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<!doctype html><html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /><title>通过原生js延迟加载图片</title><style type=\"text/css\"> div{width:100px;height:100px;background:#F00;margin-bottom:30px}</style></head><body> <div><img data-url=\"http://www.pokemon.name/w/image/Sprites/PDW/001.png \" src=\"a.gif\" /></div> <div><img data-url=\"http://www.pokemon.name/w/image/Sprites/PDW/002.png \" src=\"a.gif\" /></div> <div><img data-url=\"http://www.pokemon.name/w/image/Sprites/PDW/003.png \" src=\"a.gif\" /></div> <div><img data-url=\"http://www.pokemon.name/w/image/Sprites/PDW/004.png \" src=\"a.gif\" /></div></body>//以上图片测试时可用复制多点<script type=\"text/javascript\"> (function(){ //common function tagName(tagName){ return document.getElementsByTagName(tagName); } function $(id){ return document.getElementById(id); } function addEvent(obj,type,func){ if(obj.addEventListener){ obj.addEventListener(type,func,false); }else if(obj.attachEvent){ obj.attachEvent('on'+type,func); } } //这里可以按照需要配置些参数 var v={ eleGroup:null, eleTop:null, eleHeight:null, screenHeight:null, visibleHeight:null, scrollHeight:null, scrolloverHeight:null, limitHeight:null } //对数据进行初始化 function init(element){ v.eleGroup=tagName(element) screenHeight=document.documentElement.clientHeight; scrolloverHeight=document.body.scrollTop; for(var i=0,j=v.eleGroup.length;i<j;i++){ if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('data-url')){ v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('data-url')); v.eleGroup[i].removeAttribute('data-url') } } } function lazyLoad(){ if(document.body.scrollTop == 0){ limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight; }else{ limitHeight=document.body.scrollTop+document.documentElement.clientHeight; } for(var i=0,j=v.eleGroup.length;i<j;i++){ if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('data-url')){ v.eleGroup[i].src=v.eleGroup[i].getAttribute('data-url'); v.eleGroup[i].removeAttribute('data-url') } } } init('img') addEvent(window,'scroll',lazyLoad); })() </script></html> 以上内容通过三种方法介绍了js实现图片延时加载，希望大家喜欢。","tags":[{"name":"lazyload","slug":"lazyload","permalink":"http://yoursite.com/tags/lazyload/"}]},{"title":"双向绑定","date":"2017-03-03T08:38:05.000Z","path":"2017/03/03/双向绑定/","text":"数据双向绑定和单向绑定在react中是单向数据绑定，而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢？我猜测是两种不同的机制有不同的适应场景，查了一些资料后，总结一下。 各自优势双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时，页面自动发生更新。但是有一个缺点也是因为自动更新而导致的，因为这样你就不知道data什么时候变了，也不知道是谁变了，变化后也不会通知你，当然你可以watch来监听data的变化，但是这变复杂了，还不如单向数据绑定。 所以说按照方神的说法：Vuex推荐单向绑定就是为了[控制欲]！，虽然单向绑定牺牲了一部分便捷性，换来的是更大的[控制力] 除此之外单向数据绑定对于复杂应用来说是实施统一的状态管理，方便跟踪。 更多讨论见知乎：https://www.zhihu.com/question/49964363 单向数据与双向数据关系单向数据绑定的实现思路：所有数据只有一份一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。其实单向绑定也有双向绑定的意味，不过页面变动后数据的变化不会自动更新。方神解析了这个魔法：双向绑定 = 单向绑定 + UI事件监听。请看下面的代码示例 vue数据单向绑定123456789101112131415<body> <div id=\"app\"> <input type=\"text\" v-model=\"meg\"> <p>{{data}}</p> </div> <script> var app = new Vue({ el:‘#app‘, data :{ meg:‘‘ } }) </script></body> 当你在页面的input框中输入值时，下面一行同步显示内容，如果我们不要v-model指令能实现这个效果吗? 只需要改为: //首先设置value属性为meg，然后监听输入事件1<input type=\"text\" :value=\"meg\"@input=\"meg=$event.target.value\"> 同样也实现了双向数据绑定，所以它并不是什么黑魔法！","tags":[{"name":"Angular","slug":"Angular","permalink":"http://yoursite.com/tags/Angular/"}]},{"title":"Hello World","date":"2017-03-02T15:54:41.763Z","path":"2017/03/02/hello-world/","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","tags":[]}]