版权声明: https://blog.csdn.net/qq_23521659/article/details/88812423
github: https://github.com/whackashoe/antimoderate
因为遇到了一个页面加载很多超大图的开发场景,直接加载用户体验很差,加载的时候是这样的:
用了antimoderate是这样的:
当然,这张纯色图是我随便p的,也可以换成其他base64位的图片,例如当前图片的缩略图,因为我们后台没有处理,所以都统一用一张了。
代码:
html:
<img style="width: 300px;height: {{(i.imageInfo.height/i.imageInfo.width)*300}}px" ng-src="{{fileSystem+i.imageInfo.imageUrl}}/mic" class="antimoderate" data-antimoderate-idata="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZDMDc3QUM0NEVDMzExRTk5MDI5ODM0QkNEOEI5RDVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZDMDc3QUM1NEVDMzExRTk5MDI5ODM0QkNEOEI5RDVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkMwNzdBQzI0RUMzMTFFOTkwMjk4MzRCQ0Q4QjlENUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkMwNzdBQzM0RUMzMTFFOTkwMjk4MzRCQ0Q4QjlENUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7E95S0AAAApklEQVR42uzQMQEAMAgAoLn+FcxgJaNYwc8HIhDZ9dj5CmTJkiVLliwFsmTJkiVLlgJZsmTJkiVLgSxZsmTJkqVAlixZsmTJUiBLlixZsmQpkCVLlixZshTIkiVLlixZCmTJkiVLliwFsmTJkiVLlgJZsmTJkiVLgSxZsmTJkqVAlixZsmTJUiBLlixZsmQpkCVLlixZshTIkiVLlixZCmTJujYCDADODQL0kVSuZwAAAABJRU5ErkJggg==" alt="{{i.imageInfo.title}}">
这里需要提前设置好图片宽高,我用的angular,所以直接计算了;
然后是加 class="antimoderate" ,和一个 data-antimoderate-idata 属性,属性里面放要展示base64位图片,我放的是一张纯色图。
js
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"));
}
直接从官网copy的,直接用就行了~