antimoderate 渐进式图片加载的 JavaScript 库

版权声明： 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的，直接用就行了~