JavaScript 用turn.js 做图书的翻页效果遇到问题：手翻请求到api 图片无法插入DOM中，无法正常浏览

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OriginalRead.aspx.cs" Inherits="Units.Web.UI.Module.ToThirdPartyMagazine.OriginalRead" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="js/turn.min.js"></script>
</head>
<body>
    <div class="wrapper h100">
        <div class="real_btn_left">
            &lt;</div>
        <div class="real_read" id="real_read">
        </div>
        <div class="real_btn_right">
            &gt;</div>        <%if (Request.QueryString["return"] != "none")
        {
            if (String.IsNullOrEmpty(Request.QueryString["return"]))
            {
                if (!String.IsNullOrEmpty(Request.QueryString["detailreturn"]))
                {
                %>
                <div class="nav_sidebar_right_back">
                    <p id="backbtn"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>&return=<%=Request.QueryString["detailreturn"]%>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
                </div>
                <%}
                  else{
                %>
                <div class="nav_sidebar_right_back">
                    <p id="P1"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
                </div>
                <%
                }
            }
            else
            {
                %>
                <div class="nav_sidebar_right_back">
                    <p id="backbtn"><a href="<%=Request.QueryString["return"] %>"><img src="img/btn-back.png" alt="" /></a></p>
                </div>
                <%
            }
        }
        %>        <div class="musk r_musk" id="loading">
            <div class="load">
                <img src="img/ajax-loader.gif" alt="" /></div>
        </div>
    </div>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript">
        var year = '<%=Year %>';
        var issue = '<%=Issue %>';
        var guid = '<%=MagazineGuid %>';
        var codeName = '<%=CodeName %>';
        var total = '<%=PageCount %>';
        total = parseInt(total);
        var pageIndex = 1;
        var pageIndex1 = 1;
        var leftcount = 0;
        var pageturn = 1;
        var isPortrait = false;        window.onload = function () {
            var divhtml = "";
            for (var i = 0; i < total; i++) {
                divhtml += "<div></div>";
                
            }
            $("#real_read").append(divhtml);
            setScr();
            initBigData(0, 3);
        }        function imgauto() {
            var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
            //console.log(win_wid+'---------------'+win_hei);            var f_wid = win_wid * .94 - 220;
            if (win_wid < win_hei) {                var scaleimg = f_wid / 1024;
                setimgwid(scaleimg)
            } else {                if (f_wid / 2 * pers > win_hei) {
                    var scaleimg = win_hei / pers / 1024;
                    setimgwid(scaleimg);
                } else {
                    var scaleimg = f_wid / 2 / 1024;
                    setimgwid(scaleimg);                }
            }
        }        function setScr() {
            var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
            //console.log(win_wid+'---------------'+win_hei);            var f_wid = win_wid * .94 - 220;
            if (win_wid < win_hei) {                $('.real_read').width(f_wid + 2).height(f_wid * pers).css({ 'margin-top': (win_hei - (f_wid * pers)) / 2 + 'px' });
                $("#real_read").turn({ display: 'single' });
                isPortrait = true;
            } else {                if (f_wid / 2 * pers > win_hei) {
                    $('.real_read').width(win_hei / pers * 2 + 2).height(win_hei).css('margin-top', '0')                } else {                    $('.real_read').width(f_wid + 5).height(f_wid / 2 * pers).css({ 'margin-top': (win_hei - (f_wid / 2 * pers)) / 2 + 'px' });                }                $("#real_read").turn({ display: 'double' });
            }        }        function setimgwid(scaleimg) {
            for (var i = $('.real_read img').length - 1; i >= 0; i--) {
                $('.real_read img').eq(i).width((300 * scaleimg).toFixed(2));
                if ((i + 1) % 4 == 0) {
                    $('.real_read img').eq(i).width((124 * scaleimg).toFixed(2));
                }
            }
        }        function TurnRight() {
            if (leftcount > 0) {
                leftcount--;
            }
            if (pageIndex < total) {
                if ((2 * pageturn + 1) < total) {
                    pageturn++;
                } 
                if (pageIndex + 1 < total) {
                    if (leftcount == 0) {
                        if (isPortrait) {
                            initBigData(pageIndex, pageIndex + 1);
                            pageIndex += 1;
                        }
                        else {
                            initBigData(pageIndex, pageIndex + 2);
                            pageIndex += 2;
                        }
                    }
                }
            }
        }        function TurnLeft() {
            if (leftcount > 1) {
                leftcount++;
            }
            pageIndex1 -= 2;
            pageIndex -= 2;
            if (pageIndex1 < 0) { pageIndex1 = 0; }
            if (pageturn > 1) {
                pageturn--;
            }
        }        $('.real_btn_right').bind('click', function (e) {
            $('#real_read').turn('next');
        });        $('.real_btn_left').bind('click', function (e) {
            $('#real_read').turn('previous');
        });        $("#real_read").bind("turn.turned", function(event, page, pageObject) {
            // Implementation
            if(page + 1 == pageIndex) {
                TurnRight()   
            }else{
                TurnLeft();
            }
        });
        function initBigData(starNo, pageCount) {
            $("#loading").show();
            jQuery.getJSON("OriginalRead.aspx", {
                magazineGuid: guid,
                codename: codeName,
                year: year,
                issue: issue,
                isdata: 1,
                m: Math.random(),
                starNo: starNo,
                pageCount: pageCount
            }, function (data) {
                 var html = '';
                for (var i = 0; i < data.imageMap.length; i++) {                    html += "<img src='" + data.imageMap[i] + "'  />";
                    if ((i + 1) % 20 == 0 && i > 0) {
                        $(".real_read .p" + pageIndex1).append(html);
                        if (starNo == 0 && pageIndex < 3) {
                            pageIndex++;
                        }
                        pageIndex1++;
                         html = '';
                    }
                }
                imgauto();
                $("#loading").hide();
            });
        }
    </script>
</body>
</html>

解决方案 »

  1.   

    添加代码：$("#real_read").html(html)，你缺少了最后把html放入容器
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OriginalRead.aspx.cs" Inherits="Units.Web.UI.Module.ToThirdPartyMagazine.OriginalRead" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
        <script type="text/javascript" src="js/turn.min.js"></script>
    </head>
    <body>
        <div class="wrapper h100">
            <div class="real_btn_left">
                &lt;</div>
            <div class="real_read" id="real_read">
            </div>
            <div class="real_btn_right">
                &gt;</div>        <%if (Request.QueryString["return"] != "none")
            {
                if (String.IsNullOrEmpty(Request.QueryString["return"]))
                {
                    if (!String.IsNullOrEmpty(Request.QueryString["detailreturn"]))
                    {
                    %>
                    <div class="nav_sidebar_right_back">
                        <p id="backbtn"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>&return=<%=Request.QueryString["detailreturn"]%>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
                    </div>
                    <%}
                      else{
                    %>
                    <div class="nav_sidebar_right_back">
                        <p id="P1"><a href="Detail.aspx?guid=<%=MagazineGuid %>&year=<%=Year %>&issue=<%=Issue %>"><img src="../ToThirdPartyMagazine/img/btn-back.png" alt="" /></a></p>
                    </div>
                    <%
                    }
                }
                else
                {
                    %>
                    <div class="nav_sidebar_right_back">
                        <p id="backbtn"><a href="<%=Request.QueryString["return"] %>"><img src="img/btn-back.png" alt="" /></a></p>
                    </div>
                    <%
                }
            }
            %>        <div class="musk r_musk" id="loading">
                <div class="load">
                    <img src="img/ajax-loader.gif" alt="" /></div>
            </div>
        </div>
        <script type="text/javascript" src="js/base.js"></script>
        <script type="text/javascript">
            var year = '<%=Year %>';
            var issue = '<%=Issue %>';
            var guid = '<%=MagazineGuid %>';
            var codeName = '<%=CodeName %>';
            var total = '<%=PageCount %>';
            total = parseInt(total);
            var pageIndex = 1;
            var pageIndex1 = 1;
            var leftcount = 0;
            var pageturn = 1;
            var isPortrait = false;        window.onload = function () {
                var divhtml = "";
                for (var i = 0; i < total; i++) {
                    divhtml += "<div></div>";
                    
                }
                $("#real_read").append(divhtml);
                setScr();
                initBigData(0, 3);
            }        function imgauto() {
                var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
                //console.log(win_wid+'---------------'+win_hei);            var f_wid = win_wid * .94 - 220;
                if (win_wid < win_hei) {                var scaleimg = f_wid / 1024;
                    setimgwid(scaleimg)
                } else {                if (f_wid / 2 * pers > win_hei) {
                        var scaleimg = win_hei / pers / 1024;
                        setimgwid(scaleimg);
                    } else {
                        var scaleimg = f_wid / 2 / 1024;
                        setimgwid(scaleimg);                }
                }
            }        function setScr() {
                var win_wid = $(window).width(), win_hei = $(window).height(), pers = (1340 / 1024).toFixed(3);
                //console.log(win_wid+'---------------'+win_hei);            var f_wid = win_wid * .94 - 220;
                if (win_wid < win_hei) {                $('.real_read').width(f_wid + 2).height(f_wid * pers).css({ 'margin-top': (win_hei - (f_wid * pers)) / 2 + 'px' });
                    $("#real_read").turn({ display: 'single' });
                    isPortrait = true;
                } else {                if (f_wid / 2 * pers > win_hei) {
                        $('.real_read').width(win_hei / pers * 2 + 2).height(win_hei).css('margin-top', '0')                } else {                    $('.real_read').width(f_wid + 5).height(f_wid / 2 * pers).css({ 'margin-top': (win_hei - (f_wid / 2 * pers)) / 2 + 'px' });                }                $("#real_read").turn({ display: 'double' });
                }        }        function setimgwid(scaleimg) {
                for (var i = $('.real_read img').length - 1; i >= 0; i--) {
                    $('.real_read img').eq(i).width((300 * scaleimg).toFixed(2));
                    if ((i + 1) % 4 == 0) {
                        $('.real_read img').eq(i).width((124 * scaleimg).toFixed(2));
                    }
                }
            }        function TurnRight() {
                if (leftcount > 0) {
                    leftcount--;
                }
                if (pageIndex < total) {
                    if ((2 * pageturn + 1) < total) {
                        pageturn++;
                    } 
                    if (pageIndex + 1 < total) {
                        if (leftcount == 0) {
                            if (isPortrait) {
                                initBigData(pageIndex, pageIndex + 1);
                                pageIndex += 1;
                            }
                            else {
                                initBigData(pageIndex, pageIndex + 2);
                                pageIndex += 2;
                            }
                        }
                    }
                }
            }        function TurnLeft() {
                if (leftcount > 1) {
                    leftcount++;
                }
                pageIndex1 -= 2;
                pageIndex -= 2;
                if (pageIndex1 < 0) { pageIndex1 = 0; }
                if (pageturn > 1) {
                    pageturn--;
                }
            }        $('.real_btn_right').bind('click', function (e) {
                $('#real_read').turn('next');
            });        $('.real_btn_left').bind('click', function (e) {
                $('#real_read').turn('previous');
            });        $("#real_read").bind("turn.turned", function(event, page, pageObject) {
                // Implementation
                if(page + 1 == pageIndex) {
                    TurnRight()   
                }else{
                    TurnLeft();
                }
            });
            function initBigData(starNo, pageCount) {
                $("#loading").show();
                jQuery.getJSON("OriginalRead.aspx", {
                    magazineGuid: guid,
                    codename: codeName,
                    year: year,
                    issue: issue,
                    isdata: 1,
                    m: Math.random(),
                    starNo: starNo,
                    pageCount: pageCount
                }, function (data) {
                     var html = '';
                    for (var i = 0; i < data.imageMap.length; i++) {                    html += "<img src='" + data.imageMap[i] + "'  />";
                        if ((i + 1) % 20 == 0 && i > 0) {
                            $(".real_read .p" + pageIndex1).append(html);
                            if (starNo == 0 && pageIndex < 3) {
                                pageIndex++;
                            }
                            pageIndex1++;
                             html = '';
                        }
                    }
    $("#real_read").html(html)
                    imgauto();
                    $("#loading").hide();
                });
            }
        </script>
    </body>
    </html>