阻止JS文件加载的弹窗

Question

我刚在我的网站上实现了一个项目滑块。我使用了免费的托管服务(000webhost)来将我的网站放到网上，以便我可以在不同的设备上测试它。 我注意到的是，当您第一次打开我的网站(链接到我的网站)时，会显示来自免费托管服务的弹出窗口：

关闭弹出窗口后，项目滑块看起来像这样，这是不正常的：

然后您需要刷新页面，当没有弹出窗口时，您将看到正常的显示：

任何时候，如果滑块没有正常显示，则滑块无法完美地工作。 我认为弹出窗口阻止了某些JavaScript文件的加载。

以下是有关项目滑块的代码：

<div class="clearfix">
   <h1>Femme <span>Les articles feminins viennent à vous</span></h1>
  </div>
  
  <div class="main">
   <div id="mi-slider" class="mi-slider">
    <ul>
     <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
     <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
     <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
     <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
    </ul>
    <ul>
     <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
     <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
     <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
     <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
    </ul>
    <ul>
     <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
     <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
     <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
    </ul>
    
    <nav>
     <a href="#">Chaussures</a>
     <a href="#">Acccesoires</a>
     <a href="#">Vêtements</a>
    </nav>
   </div>
  </div>
 </div><!-- /container -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/jquery.catslider.js"></script>
 <script>
  $(function() {

   $( '#mi-slider' ).catslider();

  });
 </script>

请帮我了解如何解决我面临的问题。提前感谢。

- Lei Lionel

---

弹出窗口是如何创建的？我在您发布的代码中看不到它。 - ManoDestra

我假设托管公司会附加某种包装器或注入脚本来显示弹出窗口？P. Lionel，您能调查一下注入弹出窗口的代码在哪里，并在您的问题中展示吗？ - Josh Beam

@ManoDestra，我不是那个生成弹出窗口的人，它是由托管公司生成的。 - Lei Lionel

检查生成的源代码并查看主机公司注入的广告代码。在全局空间放置变量名称时可能需要小心，因为它们可能会被外部代码覆盖。或者他们在您的页面中注入的HTML可能会导致其完全失效，此时只能向主机公司寻求帮助。 - ManoDestra

Answer 1

我无法在您添加的代码片段上进行检查。但是我猜测两个jQuery版本之间存在冲突。在ready()函数之前，尝试在您的jQuery代码事件顶部添加以下行。

$.noConflict();

请注意图像中有两个jQuery版本正在加载。

第一次： 第二次： 更多信息请参见jQuery网站。

- Roy

---

谢谢 @Roy 提供的帮助。在说任何话之前，我必须承认我的 jquery 知识非常有限，而且我也不是母语为英语的人。我尝试使用您的解决方案来解决我的问题，但出现了一个问题。我有三个 .js 文件影响我的项目滑块：jquery.catslider.js，modernizr.custom.63321.js和jquery.min.js。我检查了这三个文件，但是我没有找到正确的位置来插入以下行 $.noConflict();你能再次提供帮助吗？;) - Lei Lionel

你必须在自定义脚本之前添加它。在你的情况下，我猜它在<script>标签内。$.noConflict(); $(function() { $( '#mi-slider' ).catslider(); }); - Roy

谢谢，我会尝试并再次回来给予反馈。 - Lei Lionel

我按照你说的做了，但没有任何新的进展。还有其他不同的建议吗？ - Lei Lionel

那么在这种情况下，尝试将 jquery.catslider.js 中的所有 $ 替换为 jQuery，并在您的 <script> 标签内部进行替换。例如：jQuery( '#mi-slider' ).catslider(); - Roy

Answer 2

首次加载时，您的代码未添加'mi-selected'类，这是您问题的原因。您可以在滑块js中检查实际问题。是的，您也可以遵循'noconflict'/@Roy的答案来检查是否已解决您的问题。

- Aparna