Image()函数将会创建一个新的HTMLImageElement实例。它的功能等价于 document.createElement('img')

正常情况下，我们使用下面方法加载图片，是能能够获取到onload事件的：

const img = new Image();
img.src = 'picture.jpg';
img.onload = () => {
  console.log('success');
}

但是如果你需要加载的图片是base64图片时，可能是因为没有请求发出，onload事件是无法执行的。

几经尝试，最终考虑将base64图片转位ObjectUrl再加载，好处是无需后端，纯前端即可兼容。移动端兼容性也非常不错。

具体实现如下：

// base64转Blob
const base64ToBlob = (base64Data) => {
  const arr = base64Data.split(','),
    type = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    len = bstr.length,
    u8Arr = new Uint8Array(l);

  while (len--) u8Arr[l] = bstr.charCodeAt(len);

  return new Blob([u8Arr], { type });
}

const base64 = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
const imgBlob = base64ToBlob(base64)

const img = new Image();
img.src = window.URL.createObjectURL(imgBlob); // blob:http://xxx
img.onload = function () {
  console.log('success')
}

URL.createObjectURL 可能有一些兼容性问题，如果你在使用过程遇到，可以hack兼容一下

function getObjectURL(blob) {
  var url = null;
  if (window.createObjectURL != undefined) {
    url = window.createObjectURL(blob);
  } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(blob);
  } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(blob);
  }
  return url;
}

本文参考资料：

Image() - Web API 接口参考 | MDN (mozilla.org)
使用img.onload事件加载base64图片的兼容问题 - 简书 (jianshu.com)
vue 上传图片，转base64取不到.onload的值 - 小蘑菇123 - 博客园 (cnblogs.com)

Lately.js是一款基于jQuery的时间处理插件，它可以轻易的将时间戳转换成如："x分钟前"、"x小时前"、"x年前"，这样的更友好易读的时间，而且无需刷新页面即自动更新页面时间的显示，功能类似"timeago.js"，但是Lately.js更加小巧(仅800字节)，暂不支持"xx时间后"格式。

引用

首先确保你的页面已经正确引用jQuery（建议2.0+），然后再引用Lately.js。

<script src="//tokinx.github.io/lately/lately.min.js"></script>

启用

启用插件十分简单：

<script>
jQuery(document).ready(function () {
	$.lately({
	'target' : '.lately-a,.lately-b,.lately-c'
	});
});
</script>

示例

Time格式

支持可直传JavaScript new Date() 对象的时间格式。

本地化

插件默认为 “简体中文” 语言，但也可以在初始化的时候连同语言一起设置：

<script>
jQuery(document).ready(function () {
	$.lately({
		'target' : '.lately-a,.lately-b,.lately-c',
		'lang': {
		'second': ' Second',
		'minute': ' Minute',
		'hour': ' Hour',
		'day': ' Days',
		'month': ' Month',
		'year': ' Years',
		'ago': ' Ago',
		'error': 'NaN'
		}
	});
});
</script>

Lately.js 的 官网 \ GitHub

JS设置cookie:

假设在A页面中要保存变量username的值("Tokin")到cookie中,key值为name，则相应的JS代码为： document.cookie="name="+username; JS读取cookie:

假设cookie中存储的内容为：name=Tokin;xxx=xxx;...

则在B页面中获取变量username的值的JS代码如下： var username=document.cookie.split(";")[0].split("=")[1]; 最后，username就可以取出来了。

既然知道了基本的cookie读写操作，那我们可以把这个操作封装成一系列函数，方便之后的频繁调用。

函数如下

//写cookies
function setCookie(name,value)
{
   var Days = 30;
   var exp = new Date();
   exp.setTime(exp.getTime() + Days*24*60*60*1000);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
   var strsec = getsec(time);
   var exp = new Date();
   exp.setTime(exp.getTime() + strsec*1);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读cookies
function getCookie(name)
{
   var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
   if(arr=document.cookie.match(reg)) return (arr[2]);
   else return null;
}
//删cookies
function delCookie(name)
{
   var exp = new Date();
   exp.setTime(exp.getTime() - 1);
   var cval=getCookie(name);
   if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

使用示例

setCookie("name","Tokin"); //写cookie
console.log(getCookie("name")); //读cookie
delCookie("name"); //删cookie
console.log(getCookie("name")); //再次读应该是读不到的

拓展功能

如果需要设定自定义过期时间，那么把上面的setCookie　函数换成下面两个函数就ok

//写cookie
function setCookie(name,value,time)
{
   var strsec = getsec(time);
   var exp = new Date();
   exp.setTime(exp.getTime() + strsec*1);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//设置时间
function getsec(str)
{
  alert(str);
  var str1=str.substring(1,str.length)1;//获取字母后的数字（这一步也可以过滤字母就获取到数字了）
  var str2=str.substring(0,1);//获取字符串字一个字母
  if (str2=="s") return str11000;
  else if (str2=="h") return str160601000;
  else if (str2=="d") return str1246060*1000;
}
//这是有设定过期时间的使用示例：
//s30是代表30秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","Tokin","h12"); //写入操作，可以设定过期时间了（12小时）

基本的代码就像上面，发挥自己的想象力吧

这种简单的小功能思路很清晰，就是检测滚动条是不是在顶部，不是的话就显示返回顶部按钮，是的话就把它隐藏。

滚动条监测在新版的主流浏览器中是这样实现的：

document.body.scrollTop

如果想要兼容IE，那么可以加入下面这句完成：

document.documentElement.scrollTop

上面就是最主要的代码了，但是想要实现实时的监测滚动条的位置，我们还需要一个window.onscroll才能完成，这样不断下拉会不断刷新滚动条的位置。

说道这里，你大概已经可以试着写出返回顶部这个功能了。

贴出我的代码吧：

HETM

<a class="back2top" style="display:none;"></a>

CSS

.back2top {z-index:99;background:#000;width:36px;height:36px;display:block;position:fixed;right:20px;bottom:20px;cursor:pointer;border-radius:2px;opacity:.6;}
.back2top:before {content:"";position:absolute;right:8px;top:10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #fff;}

JavaScript

window.onscroll=function(){
    var goTop = document.getElementsByClassName("back2top");
    if(goTop.length>0){
        goTop[0].style.display = document.documentElement.scrollTop >= 200 || document.body.scrollTop >= 200 ? 'block':'none';
        goTop[0].onclick=function(){
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;
        }
    }
}

getElementsByClassName可能不兼容IE8，如果想向下兼容，可以尝试用getElementById就可以了。

jQuery的Dom操作十分简单，在开发iDevs主题的时候，其中“菜单”和“搜索”部分使用到了一些很基本的Dom操作，图方便，我使用了jQuery，闲来无事，尝试着使用原生的js完成这一操作，发现其代码量一样，且原生js效率更高，啰嗦多了，先贴代码。

HTML结构如下：

<input type="button" id="Test" class="menu_click" value="按钮" />

jQuery的Dom实例：

jQuery_btn_click("Test", "menu_click", "menu_close", true);
function jQuery_btn_click(btn, on, off, flag) {
    $('#' + menu).click(function () {
        $('#' + menu).prop('class', (flag = !flag) ? on : off);
    });
}

为了方便，我封装了函数并传了几个有趣的参数，代码量很少，具体传的什么一看便知。

原生Javascript实例：

cover_click("Test", "menu_click", "menu_close", true);
function cover_click(btn, on, off, flag) {
    (btn = document.getElementById(btn)).onclick = function () {
        btn.setAttribute("class", (flag = !flag) ? on : off);
    }
}

就是这样子，原生的方法操作起来与jQuery的代码量几乎一致。

兼容性

兼容性方面，jQuery视版本而定，2.0版本之后已经不再支持IE8-，原生的，我本地测试是支持IE7+，欢迎大家测试一下。

上面只是一个实例，在此记录一下，修修改改还可以完成其他的一些简单的Dom操作，如果有更方便且简单的方法欢迎指出。