layer移动端弹框使用预加载显示内容

发现问题：图片加载过慢   --  解决方法 ( 预加载 )

后经过验证，发现在UC浏览器上显示不出来文字内容部分，只显示了预加载的图片，于是把整个弹框内容都用了（ 预加载 ） 。

代码如下：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="../layer_mobile/need/layer.css" />
        <style type="text/css">
            .choice{
                display: inline-block;
                width: 15px;
                height: 15px;
                margin-right: 10px;   
            }
            .choice img{
                width: 100%;
                height: 100%;
                margin-top: -3px;
            }
            .ad_text{
                margin-top: 15px;
            }
            .ad_text font{
                color: red;
            }
            .small_img{
              width: 100%;
              display:none;
            }
            .ad_text{
              display:none;
            }
            .layui-m-layercont .small_img{
              display:block;
            }
            .layui-m-layercont .ad_text{
              display:block;
            }
            .title{
                text-align: center;
                font-weight: 600;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <!--隐藏域-->
        <form role="form"  method="post">
            <img src="../img/1.jpg" class="small_img">
            <div class="ad_text">
                <div class="choice" id="tick">
                    <img  src="../img/check.png" onclick="changeImg($(this))"/>
                </div>我已阅读并同意
                <font onclick="showDetail('my')">《我我我》</font>均为“否”，且阅读 
                <font onclick="showDetail('you')">《你你你》</font>和
                <font onclick="showDetail('he')">《他他他》</font>
            </div>
        </form>
        <button class="nextBtn">点击</button>
        <script src="../layer_mobile/layer.js"></script>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            /*点击按钮   jQuery.prop("outerHTML")用来获取当前节点的html代码(包含当前节点)*/ 
            $('.nextBtn').click(function(){
                layer.open({
                    content:$('.small_img').prop('outerHTML') + $('.ad_text').prop('outerHTML'),
                    btn:['好的']
                })
            });
            
            // 是否勾选按钮
            function changeImg(obj){
                var changeImg = $(obj).attr('src');
                if(changeImg == '../img/check.png'){
                    $(obj).attr('src','../img/checked.png');//选中
                }else{
                    $(obj).attr('src','../img/check.png');//未选中
                }
            }
            // 点击
            function showDetail(point){
                var html = '';
                if(point == 'my'){ //我我我
                    html = '<div class="title">标题</div>'
                    +'<div>内容我我我</div>';
                }else if(point == 'you'){ //你你你
                    html = '<div class="title">标题</div>'
                    +'<div>内容你你你</div>';
                }else if(point == 'he'){ //他他他
                    html = '<div class="title">标题</div>'
                    +'<div>内容他他他</div>';
                }
                var pageii = layer.open({ //弹出详细页面
                    type: 1,
                    content: html,
                    anim: 'up',
                    style: 'position:fixed; left:0; bottom:0; width:100%; height:60%; border: none;overflow: scroll; -webkit-animation-duration: .5s; animation-duration: .5s;'
                });
            }
            
        </script>
    </body>
</html>

 

posted @ 2020-06-19 17:03  戌月十一  阅读(704)  评论(0)    收藏  举报