Question

我之前创建了这个问题但是以另一种方式没有得到答案。所以今天我写了一些简单的代码，以明确的方式分享我的问题。

我使用jQuery来调用图片幻灯片功能。
show.php中的AJAX功能会调用get.php并在DIV中打印结果。

我的问题是get.php提供的DIV内的滑动（上一个 - 下一个）在show.php中不起作用。但是，如果我直接在浏览器中调用get.php，那么它就可以了。

我很困惑，我想在调用AJAX时我的div中有错误。

我的文件

show.php

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test </title>
        <link rel="stylesheet" type="text/css" href="demo.css" />
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="newscript.js"></script>
        <link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />
        <script src="themes/2/js-image-slider.js" type="text/javascript"></script>
        <link href="generic.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <?php
            include("samiloxide.php");
            $sql=mysql_query(" select * from  section ");

            while($r=mysql_fetch_array($sql)){
                echo "<li><a  onclick='loadpage($r[id])' >$r[section]</a></li>" ;
            }
        ?>
        <div id="pageContent"></div>
    </body>
</html>

newscript.js

var section;
function loadpage(section){ 
    var section = section.toString();

    $.ajax({
       type: "POST",
       url: "get.php",
      dataType: "script",
       data: ({section : section}),
     success: function(html){
            $("#pageContent").empty();
            $("#pageContent").append(html);
        }
    });
}

get.php

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
    <!--
    #gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;}
    #gallery{position: relative; left: 0; top: 0;}
    #gallery li{float: left; margin: 0 20px 15px 0;}
    #gallery li a img{border: 4px solid #40331b; height: 175px; width: 160px;}
    #gallery-controls{margin: 0 auto; width: 732px;}
    #gallery-prev{float: left;}
    #gallery-next{float: right;}
    -->
</style>

<script type="text/javascript">
    <!--
    $(document).ready(function(){ 
        // Gallery
        if(jQuery("#gallery").length){
            // Declare variables
            var totalImages = jQuery("#gallery > li").length, 
            imageWidth = jQuery("#gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

            jQuery("#gallery").width(totalWidth);

            jQuery("#gallery-prev").click(function(){
                if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
                    jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
                }
                return false;
            });

            jQuery("#gallery-next").click(function(){
                if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
                    jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
                }
                return false;
            });
        }
    });
    -->
</script>

           <?php
            include("samiloxide.php");
//if(!$_POST['page']) die("0");

$section = (int)$_POST['section'];

$sql=mysql_query(" select * from images  where section='$section'");

echo "
<div id='gallery-wrap'>
    <ul id='gallery'>
    ";


while($rr=mysql_fetch_array($sql)){

      echo " <li><a href='$rr[image]'><img src='$rr[image]' alt='' /></a></li>";
           }
           echo "

    </ul>
</div>
<div id='gallery-controls'>
    <a href='#' id='gallery-prev'><img src='images/prev.png' alt='' />next</a>
    <a href='#' id='gallery-next'><img src='images/next.png' alt='' />last</a>
</div>
           ";
?>

Answer 1

这有点复杂，我无法快速修复您可以复制，粘贴和验证的代码。

在get.php中，您加载了包含图库的文档，并且使成为$(document).ready()的工作库。

但是在show.php中，当您加载get.php文件时，不会调用$(document).ready()。 $(document).ready()的{{1}}早已被调用，您的文档现在处于show.php状态。因此，当您加载布局时，您不会自动执行使该布局有效的代码。

您必须将interactive中的$(document).ready()代码移动到get.php，然后将其绑定到AJAX调用完成。或者取消绑定show.php中的代码：只需从HTML末尾调用它，而不将其包装在get.php中。

这并不是所有浏览器都能保证，但是，因为在文档准备就绪时正确调用了$(document).ready()，在$(document).ready()中你要做的就是加载HTML文件。

HTML被加载，因此show.php被触发。你不能指望不同。

然后 HTML要求加载其他资源（例如图像），但浏览器不知道这一点。它已经解雇了onLoad，因此您已经执行了图库设置代码。如果布局要求图像'SRC已已加载以便正确设置样式，那么它将不会始终有效。它可能第二次工作，因为图像在浏览器缓存中。它可以用于快速连接而不是慢速连接;它可能适用于小图像，快速加载，而不是较大的图像。所有这些行为都表明已经加载的图像是必要的。

同样，快速而肮脏的解决方法是在适当的延迟后启动设置（但是什么是合适的？你无法知道）。如果所有图像都具有已知尺寸，则另一种可能性是以HTML或CSS提供这些尺寸。毕竟，布局通常需要加载的图像，以便它们占用页面上的空间，但为此，您不需要图像实际上可显示。它们可能是空的空间（可能带有背景样式）。

第三种可能性，更复杂但保证可以在所有浏览器中使用，是将图像SRC保存到另一种标记中（例如，具有图像加载类的DIV，默认隐藏），以及在load（）成功之后分析这些标记并将它们转换为IMG，将onLoad附加到它们。当所有这些onload都被触发时，你知道启动图库设置是可以的。虽然描述（和代码）的时间更长，但最后一种方法实际上比快得多比天真的“快速修复：稍等一下并激活设置”一样。

div滑动效果不适用于jQuery

1 个答案: