时间戳

首页 > 解决方案 > Googleapis / Jquery 循环在 Macbook Air 上停止工作

google-api - Googleapis / Jquery 循环在 Macbook Air 上停止工作

问题描述

我有一个多年来一直运行良好的网页。在过去的几天里，我收到了来自用户的投诉，称 googleapi 的“循环”选项在 Macbook Air 上停止工作。以下代码继续适用于使用 Firefox、Chrome、IE 和 Edge 的 PC。奇怪的是，“循环”也适用于我 iPhone 的 Safari 浏览器。它只是在 Macbook 上失败了。以下是网站 index.shtml 页面的代码片段：

<!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">
<!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="Page_Specific_Title" -->
    <title>My Home Page SHTML</title>
    <!-- InstanceEndEditable -->
    <link href="CSS/MySite.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        <!--
        body {
            background-color: #EEE8AA;
            p {margin:0; padding:0}
             }
        -->
    </style>
    <!-- InstanceBeginEditable name="Page_Specific_Head" -->


<!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.slideshow').cycle({
                fx:         'shuffle',  // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                speed:      1500,       // speed at which the transition occurs (in miliseconds)
                delay:      1000,       // time spent on the first slide before starting the slideshow
                continuous: 0,          // true (1) to start next transition immediately after current one completes
                timeout:    9000        // time spent on each slide
                                });
                            });
    </script>
    <meta name="description" content="My text."/>
    <meta name="keywords" content="Keywords"/>
        <!-- InstanceEndEditable -->
</head>
<body>
<div class="outer_width_1000" >
    <div class="index_page_column_1" >
        <div class="slideshow" >
            <img src="home_page_cycle/image1.jpg" alt="image1"/>
            <img src="home_page_cycle/image2.jpg" alt="image2"/>
            <img src="home_page_cycle/image3.jpg" alt="image3"/>
            <img src="home_page_cycle/image4.jpg" alt="image4"/>
        </div>

对于 Macbook 用户来说，问题是图像一个接一个地出现在四行中，覆盖了应该出现在循环图像下方的网站文本。这就像“循环”引用被忽略了。您知道为什么带有 Safari 的 MacBook Air 会突然发生这种情况吗？谢谢你看这个。

标签： google-apijquery-cycle

解决方案

我解决了这个问题。我意识到我已经很多年没有看过 Google 上托管的 JQuery 版本了。我的心态是“如果它没有坏，就不要修复它”。当我查看这些版本时，我注意到谷歌提供的是 JQuery 3.4.1。所以我改变了原来的行：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

至：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

这解决了问题，现在在 MacBook 上一切正常。同样，在 iPhone、iPad 和上述所有窗口/浏览器组合上，一切都很好。

推荐阅读