Question

你好的家伙还有问题..所以虽然重新写了问题。把我的外部页面放到我的索引页面上的div ..很棒..但似乎无法让java脚本工作..我可以让它们一次使用这个...

     <script>
        $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
          var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 
        }
    });
</script>

但是当我去不同的页面然后回来它不起作用...我把我的脚本放在主索引页的底部

<script>
    $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
            $('#st-accordion').accordion();
        };
    });

</script>

<script>
       $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
            $('#st-accordion2').accordion();
        }
    });

</script>


<script>
    $(function () {
        $.scrollUp();
    });
</script>

<!-- Fade Top Panel  -->
<script>
        $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
          var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 
        }
    });
</script>

<script> 

    $ajax({
        url: "pages/index.php"
        dataType: "html",
        success: function(html) {
             $('#submit').click(function(){
            $.post("send.php", $("#mycontactform").serialize(),  function(data) {   });
                 $('#success').html('Message sent!');
                 $('#success').hide(2000);


                    $('#name1').val('');
                    $('#telephone').val('');
                    $('#email').val('');
                    $('#message').val('');

            });
        }


    });




</script>

<!-- Viberating Icons -->


<script>

    $(function() {
        var interval = 10;
        var duration= 1000;
        var shake= 3;
        var selector = $('.viberate'); /* Your own container ID*/
        $(selector).each(function(){
            var elem = this;
            var vibrateIndex;
            var timeoutIndex;
            $(this).hover( /* The button ID */
                function(){ 
                    vibrateIndex = setInterval(function(){
                      vibrate(elem); 
                    }, interval, 0);
                    timeoutIndex = setTimeout(function() 
                   {clearInterval(vibrateIndex)},1000);
                },
                function(){
                clearInterval(vibrateIndex);
                clearTimeout(timeoutIndex); 
                }
            );
        })

            var vibrate = function(elem){
                $(elem).stop(true,false)
                .css({position: 'relative', 
                left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
            });
                        }
                    });

</script>

Answer 1

最好先加载JS / CSS，然后只加载动态信息。

在这种情况下，您将缓存JS / CSS和小响应。这意味着更好的表现。

当然不要加载<html><head>...</head>部分。每个页面只有一个<html>标记，而您的标记已有一个。如果你加载它你需要剥离它。这意味着你将做不必要的工作， ajax将更慢地工作。

如果您使用AJAX，则只需加载所需的数据。 垃圾减少 - 响应速度更快。

<强>更新

试试这个：

<script>



    function init(){

        // Accodion 1 & 2 -->
        $('#st-accordion').accordion();

       $('#st-accordion2').accordion();


        //Scroll Up -->

        $.scrollUp();


        // Fade Top Panel  -->

    var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 


      // Contact Form Send -->

      $('#submit').click(function(){
            $.post("send.php", $("#mycontactform").serialize(),  function(data) {   });
                 $('#success').html('Message sent!');
                 $('#success').hide(2000);


                    $('#name1').val('');
                    $('#telephone').val('');
                    $('#email').val('');
                    $('#message').val('');

            });


// Viberating Icons -->

      var interval = 10;
        var duration= 1000;
        var shake= 3;
        var selector = $('.viberate'); /* Your own container ID*/
        $(selector).each(function(){
            var elem = this;
            var vibrateIndex;
            var timeoutIndex;
            $(this).hover( /* The button ID */
                function(){ 
                    vibrateIndex = setInterval(function(){
                      vibrate(elem); 
                    }, interval, 0);
                    timeoutIndex = setTimeout(function(){clearInterval(vibrateIndex)},1000);
                },
                function(){
                clearInterval(vibrateIndex);
                clearTimeout(timeoutIndex); 
                }
            );
        })

            var vibrate = function(elem){
                $(elem).stop(true,false)
                .css({position: 'relative', 
                left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
            });
         }


    $("#posts").masonry({
        itemSelector: '.post',
        isAnimated: true,
        columnWidth: function(containerWidth) {

        var width = $(window).width();
        var col = 300;


        if (width < 1200 && width >= 980) {
            col = 240;
            } else if (width < 980 && width >= 768) {
                col = 186;
            }

            return col;
            }
            });

    }

</script>

我将所有JS放在一个 init（）函数中。加载ajax后，调用该函数。

并检查语法我可能会丢失一些括号。

ajax加载脚本无法正常工作

1 个答案: