图片加载

JS预加载

• 方法1

           var images = new Array()

          function preload() {
                    for (i = 0; i < preload.arguments.length; i++) {
                        images[i] = new Image()
                        images[i].src = preload.arguments[i]
                    }
           }
          preload(
                        "./images/cases/zlf/1.png",
                        "./images/cases/zlf/2.png",
                        "./images/cases/zlf/3.png"
                    )

• 方法2（仅供参考）

var imgArray = ["./images/cases/zlf/1.png","./images/cases/zlf/2.png", "./images/cases/zlf/3.png]
for (var i = 0; i < imgArray.length; i++) {
      var img = new Image()
      img.src = imgArray[i]
}

https://www.cnblogs.com/hjt-7/p/6293310.html

JS懒加载

<script>
        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>

https://zhuanlan.zhihu.com/p/55311726

鼠标拖拽，图片移动

               var inner = document.getElementById('pic')
               // 鼠标拖拽事件
               inner.onmousedown = function(e) {
                    if (e.stopPropagation) e.stopPropagation();
                    if (e.preventDefault) e.preventDefault();
                    var e = e || window.event;
                    //鼠标的位置
                    var l = e.offsetX;
                    var t = e.offsetY;
                    document.onmousemove = function(e) {
                        var e = e || window.event;
                        inner.style.left = e.clientX - l + "px"
                        inner.style.top = e.clientY - t + "px"
                    }
                }
                document.onmouseup = function() {
                    document.onmousemove = null;
                }

https://blog.csdn.net/mark_gsd/article/details/90486264