js实现页面监听滑动、预加载图片

1.判断是否微信中打开

$(window).on("load",function(){
        // 判断是否微信打开  部分手机微信有缓存
        let ua = window.navigator.userAgent.toLowerCase()
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            //在微信
        }
 })

2.判断窗口大小，页面布局自适应

  // 判断窗口大小，页面布局自适应 图片/区域的大小750 * 1061
    function screenSize(heightNew) {
        let width=(document.body.clientWidth - 10)
        let height= (document.body.clientHeight-300)
        let h = Number((1061 * (width / 750)).toFixed(2))
        if (height > h || height === h) {
        // 可替换对应img标签的id
            $("#main img").css('width', width + 'px')
            $("#main img").css('height', h + 'px')
        } else {
            let hNew = heightNew ? heightNew : height
            let w = Number((750 * (hNew / 1061)).toFixed(2))
            if (w < width || w === width) {
                $("#main img").css('width', w + 'px')
                $("#main img").css('height', hNew + 'px')
            } else {
                screenSize(hNew - 20)
            }
        }
    }

3.页面监听滑动进行 翻页等操作

			let startY,endY,dis = 0 //第一次触碰的焦点 ，最后触碰的焦点 ，滑动距离
            $(document).ready(function () {
                //获取第一次触碰屏幕的焦点startY的事件 pageX是横向，pageY是纵向
                document.addEventListener('touchstart',function(e){
                    let touch = e.touches[0]
                    startY = touch.pageX
                })
                //获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
                document.addEventListener('touchmove',function(e){
                    let touch = e.touches[0]
                    endY = touch.pageX
                    dis = startY - endY
                })
                //滑动事件结束 如果手指滑动距离大于150 并且正向 -->向左滑动翻页
                //滑动事件结束 如果手指滑动距离大于150 方向为负 -->向右滑动翻页
                //翻页完毕 执行qingling函数 进行数值清零
                document.addEventListener('touchend',function(e){
                    if(Math.abs(dis)>100){
                        if(dis>0){
                        // 下一页
                            nextPage()
                            qingling()
                        }else{
                        // 上一页
                            prePage()
                            qingling()
                        }
                    }
                })
            })
    //使相关参数清零
    function qingling(){
        startY = 0
        endY = 0
        dis = 0
    }

4.预加载图片

// 先将下面的代码作为imageLoad.js文件引入，再使用
// 预加载图片 提供更好体验
        let images = ['images/JMRH/1.png', 'images/JMRH/2.png', 'images/JMRH/3.png']
        imgLoader(images, function(percentage){
       		 // 加载后的逻辑
        }）

(function () {
    function isArray(obj) {
        return Object.prototype.toString.call(obj) === '[object Array]';
    }

    /**
     * @param imgList 要加载的图片地址列表，['aa/asd.png','aa/xxx.png']
     * @param callback 每成功加载一个图片之后的回调，并传入“已加载的图片总数/要加载的图片总数”表示进度
     * @param timeout 每个图片加载的超时时间，默认为5s
     */
    var loader = function (imgList, callback, timeout) {
        timeout = timeout || 5000;
        imgList = isArray(imgList) && imgList || [];
        callback = typeof(callback) === 'function' && callback;

        var total = imgList.length,
            loaded = 0,
            imgages = [],
            _on = function () {
                loaded < total && (++loaded, callback && callback(loaded / total));
            };

        if (!total) {
            return callback && callback(1);
        }

        for (var i = 0; i < total; i++) {
            imgages[i] = new Image();
            imgages[i].onload = imgages[i].onerror = _on;
            imgages[i].src = imgList[i];
        }

        /**
         * 如果timeout * total时间范围内，仍有图片未加载出来（判断条件是loaded < total），通知外部环境所有图片均已加载
         * 目的是避免用户等待时间过长
         */
        setTimeout(function () {
            loaded < total && (loaded = total, callback && callback(loaded / total));
        }, timeout * total);

    };

    "function" === typeof define && define.cmd ? define(function () {
        return loader
    }) : window.imgLoader = loader;
})();