之前写API时有个img标签调用的图片加载比较慢，就导致img刚开始是没有高度的，过一会儿突然出来的样子，这就显得十分的突兀，我首先想到的是固定高度，但是这样会导致空白一段时间，这就略微影响美观性，于是用上了懒加载。
最开始没有懒加载的代码为：
<img src="http://tu.hanximeng.com/api.php" width="100%">
添加懒加载后的代码：
<img class="lazy" src="http://api.hanximeng.com/theme/images/loading.gif" data-original="http://api.hanximeng.com/ranimg/api.php" width="100%">
当然需要配合JS：
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
这样才大功告成，附上完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>寒曦朦 - 图片延迟加载</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img class="lazy" src="http://api.hanximeng.com/theme/images/loading.gif" data-original="http://api.hanximeng.com/ranimg/api.php" width="100%"/>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
</body>
</html>
需要配合JQuery来使用，不太会使用的可以复制试试。
博主，你这个代码高亮用的是什么插件啊？