导航位置：首页 > 技术开发 > 前端技术开发
网页中高清大图加载优化解决方案 通过antimoderate.js解决大图片加载
豆腐果2020-03-13围观：点赞：
网站中经常会遇到高清图片的优化，有时候幻灯图片考虑到图片占满横幅也会用比较大的图片，这时候打开网站为了载入这张图片往往会比较慢。
通过antimoderate.js可以对大图加载进行优化，可以先载入一张像素很低且文件很小的图片作为模糊图，然后再载入高清，这样就避免了网站图片没有载入完会有一个空白的问题，具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片加载优化</title>
</head>
<body>
<img style="width:800px; height:576px;" src="2.jpg" class="antimoderate" data-antimoderate-idata="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wgARCAArADwDAREAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAgMBAAQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAH50VsuKhAJEyhq+vOhZpEFkrHDzttNZJjB1JJs0bL51lnIVxJWOVVw86NiSVgPTLwhDAeIZ//EAB8QAAICAgMAAwAAAAAAAAAAAAABAhESIRAiMQMyQf/aAAgBAQABBQKEciMbEikNGI1oi8TOmtuSsjslLEvqenVyU7lpSloU9v7CfVF0NqHyS2ZPHhqjM03KOTfkaSe+KMUYoquHs/T/xAAdEQACAgIDAQAAAAAAAAAAAAAAARExICECEDAy/9oACAEDAQE/AfCihLZEFFE4cHsX1LNR08Xecj302Ly//8QAGxEAAgIDAQAAAAAAAAAAAAAAASAAMREhMFH/2gAIAQIBAT8B4Wly5hCgUPjyDXX/xAAgEAABAwQDAQEAAAAAAAAAAAAAAREhAhAgMRJBYSKB/9oACAEBAAY/AlyfBaPDehn6PMIJFlzTCU8Sqy2+kcVjl0fp7fRJBxJTDRojH//EAB8QAQACAgIDAQEAAAAAAAAAAAEAESExQXEQUYGhYf/aAAgBAQABPyHkKouWKIaR5MTbNMep0HgNzf7AarIKTFcoi4ZDDt2xfybQDpTMvkl3M0rOI204ziUNuAlAHTKlTBMgFc+1mtUcajBm2ZH2VoB0xc2CxzGg3DU3CiLot23FgdoVKSwR6BMjBoW5z3OzvUdsG5VxDs8IdgJ/qaMTFmJUIT//2gAMAwEAAgADAAAAEO0M+iCRNCgVxwJGH1ICs8kEtv/EABsRAQEBAQEBAQEAAAAAAAAAAAEAESEQMTBB/9oACAEDAQE/EA2DX07Btj5qo6hYaO2a2DG3Hiazi8kgOjkaaw5xj3kx8fNyWTubLyfnquZHXbC0kwyQMCD/AH8Cb//EABwRAQEBAAMBAQEAAAAAAAAAAAEAERAhMSBBUf/aAAgBAgEBPxBclz4XLTjAT2SuS75bi/i7cDhahDq3rLxk/SfXD6THfkNLrcs7j3jYyek0Mb12AXuUPjfhi//EACIQAQACAgICAgMBAAAAAAAAAAEAESExQVFhcYHRkbHh8f/aAAgBAQABPxAbUYbyxAK3qCVwQWaDziCoDiXU5An8TJ4C4mZSBNCytHuGaY2IzZjaHPGmUxBHIylfcJAQS066RQ52uZ11K2LpvKzkdsNHgVrgD+TUcEd2sR3WBqXlC4GSAFA4+9xWVABW83ct3JTVoMb+CcaM2A4IhUhA3MytInNZm5dNaTiXQxLXMvLGQOgFyxeBWB79RoAjewqqMfuUEbubOalT8QAq6dzEOa9+/cUVYyeIwvhLcdcxRS1b2f4SiU558OIK0D0luDB9mYNsbg27fLKIEBktzKMAPRCUZkIQ7gmgxP/Z">
<img style="width:800px; height:576px;" src="3.jpg" class="antimoderate" data-antimoderate-idata="data:image/jpg;base64,/9j/4QrERXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAfAAAAcgEyAAIAAAAUAAAAkYdpAAQAAAABAAAAqAAAANQACvyAAAAnEAAK/IAAACcQQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpADIwMjA6MDM6MTMgMTk6MjU6MDQAAAAAAAOgAQADAAAAAf//AACgAgAEAAAAAQAAAGSgAwAEAAAAAQAAADgAAAAAAAAABgEDAAMAAAABAAYAAAEaAAUAAAABAAABIgEbAAUAAAABAAABKgEoAAMAAAABAAIAAAIBAAQAAAABAAABMgICAAQAAAABAAAJigAAAAAAAABIAAAAAQAAAEgAAAAB/9j/7QAMQWRvYmVfQ00AAv/uAA5BZG9iZQBkgAAAAAH/2wCEAAwICAgJCAwJCQwRCwoLERUPDAwPFRgTExUTExgRDAwMDAwMEQwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwBDQsLDQ4NEA4OEBQODg4UFA4ODg4UEQwMDAwMEREMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIADgAZAMBIgACEQEDEQH/3QAEAAf/xAE/AAABBQEBAQEBAQAAAAAAAAADAAECBAUGBwgJCgsBAAEFAQEBAQEBAAAAAAAAAAEAAgMEBQYHCAkKCxAAAQQBAwIEAgUHBggFAwwzAQACEQMEIRIxBUFRYRMicYEyBhSRobFCIyQVUsFiMzRygtFDByWSU/Dh8WNzNRaisoMmRJNUZEXCo3Q2F9JV4mXys4TD03Xj80YnlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3EQACAgECBAQDBAUGBwcGBTUBAAIRAyExEgRBUWFxIhMFMoGRFKGxQiPBUtHwMyRi4XKCkkNTFWNzNPElBhaisoMHJjXC0kSTVKMXZEVVNnRl4vKzhMPTdePzRpSkhbSVxNTk9KW1xdXl9VZmdoaWprbG1ub2JzdHV2d3h5ent8f/2gAr8jkhAMTMqbeeLjqXO/tv9GPAEcUlM+eZhXdiO21MIgEcRUj52nLdD4fR03yQA72JJLzbzdaRfpP1IIPTsrkBkjj6hl+2u/wBnc1XNNrMHhyuP0ydppMxnGjzikV16k8iMquwSNIuTDccBx6D9nMMFy6aRHrxKnY7GhwsSmH6J1X9H+t6B9Gvq86r0p1pXlg6of//Z">
<script src="../antimoderate.js"></script>
<script>
var antimoderate_images = document.querySelectorAll('.antimoderate');
for(var i=0; i<antimoderate_images.length; ++i) {
var img = antimoderate_images[i];
AntiModerate.process(img, img.getAttribute("data-antimoderate-idata"), img.getAttribute("data-antimoderate-scale"));
}
</script>
</body>
</html>
这里的重点就是就是要加载一个样式和属性。
class="antimoderate" data-antimoderate-idata
另外：base64图片在线转换工具一大堆，可以网上搜一下。
共有0条评论