预加载 和 懒加载
2019-03-14 本文已影响0人
Wo信你个鬼
预加载
具体请看：http://www.createjs.cc/preloadjs/docs/classes/LoadQueue.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.loading{
text-align: center;
font-size: 30px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="loading">
0%
</div>
<script src="js/preloadjs.min.js"></script>
<script type="text/javascript">
//实例化一个预加载源的对象
var loading = document.querySelector(".loading");
var queue = new createjs.LoadQueue();
queue.loadManifest([
{"id": "1","src": "img/wg.gif"},
{"id": "1","src": "img/wg2.gif"}
]);
queue.on("complete", function(res){
console.log("complete",res)
});
queue.on("progress", function(res){
console.log("progress",res)
loading.innerHTML = Math.floor(res.progress*100) +"%";
});
</script>
</body>
</html>
懒加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img class="lazyload" alt="" width="600" height="350" data-original="img/gg.gif" />
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function() {
$("img.lazyload").lazyload({
effect: "fadeIn",
placeholder: "img/timg.webp"
});
});
</script>
</body>
</html>
