【前端】手机浏览器测试touchmove事件卡顿

红红火火_ 2014-10-28 04:58:22

写了一个滑动翻页的功能，电脑上面滑动过程非常流畅，换手机上测试就很卡顿了，直接上代码了。
因为是touch事件，电脑上测试的话，你懂的···



<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <script src="jquery-1.8.3.min.js"></script>

    <style>

        html,

        body {

            height: 100%;

            overflow: 0;

        }

        * {

            margin: 0;

            padding: 0;

        }

        #containner {

            height: 100%;

            width: 100%;

            max-width: 400px;

            background: #ccc;

            margin: 0 auto;

            position: relative;

        }

        .layer1 {

            background: url(img/8.jpg);

            z-index: 1;

        }

        .layer2 {

            background: url(img/7.jpg);

            z-index: 2;

        }

        .layer3 {

            background: url(img/6.jpg);

            z-index: 3;

        }

        .layer4 {

            background: url(img/5.jpg);

            z-index: 4;

        }

        .layer5 {

            background: url(img/4.jpg);

            z-index: 5;

        }

        .layer6 {

            background: url(img/3.jpg);

            z-index: 6;

        }

        .layer7 {

            background: url(img/2.jpg);

            z-index: 7;

        }

        .layer8 {

            background: url(img/1.jpg);

            z-index: 8;

        }

        .slow_action {

            -webkit-transition: all .5s ease;

        }

        .layer1,

        .layer2,

        .layer3,

        .layer4,

        .layer5,

        .layer6,

        .layer7,

        .layer8 {

            width: 100%;

            height: 100%;

            position: absolute;

            background-size: 100% 100%;

        }

    </style>

</head>



<body>



    <div id="containner">

        <div class="layer8 slow_action"></div>

        <div class="layer7 slow_action"></div>

        <div class="layer6 slow_action"></div>

        <div class="layer5 slow_action"></div>

        <div class="layer4 slow_action"></div>

        <div class="layer3 slow_action"></div>

        <div class="layer2 slow_action"></div>

        <div class="layer1 slow_action"></div>

    </div>

</body>

<script>

    var start_x, start_y, end_x, end_y, move_num;

    var client_height = $(window).height();



    $("#containner div").on("touchstart", function(e) {

        e.preventDefault();

        start_x = e.originalEvent.targetTouches[0].clientX;

        start_y = e.originalEvent.targetTouches[0].clientY;

        console.log(start_x);

        console.log(start_y);



    });

    $("#containner div").on("touchmove", function(e) {

        e.preventDefault();

        $(this).removeClass("slow_action");

        end_x = e.originalEvent.targetTouches[0].clientX;

        end_y = e.originalEvent.targetTouches[0].clientY;

        move_num = (end_y - start_y).toFixed(2);

        console.log(move_num);

        var tf_num = "translateY(" + move_num + "px)";

        $(this).css("-webkit-transform", tf_num);



    });

    $("#containner div").on("touchend", function() {

        $(this).addClass("slow_action");

        if (move_num < -(client_height / 2)) {



            $(this).css({

                "-webkit-transform": "translateY(-900px)",



            });



        } else if (move_num > 0) {

            $(this).css({

                "-webkit-transform": "translateY(0px)",



            });

        } else {

            $(this).css({

                "-webkit-transform": "translateY(0px)",

            });

        }

    });

</script>



</html>

...全文

1063 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

yibuyisheng2009 2014-11-09

打赏
举报

需要明白以下原理： dom渲染和js执行是在一个线程里面，dom重绘重排的时候，js是不能执行的，同样的，js执行的时候，dom是不能重绘重排的，js任何的dom操作都会生成dom渲染相关的任务。所以，根据这个原理，你优化一下你的代码吧，特别是你的代码运行在手机这种平台上。

红红火火_ 2014-10-30

打赏
举报

试了下还是很卡顿

jy02409187 2014-10-29

打赏
举报


$("#containner div").on("touchstart", function(e) {
        //e.preventDefault();
        start_x = e.originalEvent.targetTouches[0].clientX;
        start_y = e.originalEvent.targetTouches[0].clientY;
        console.log(start_x);
        console.log(start_y);
 
    });