弹出窗口阻止加载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> 

请帮助我知道如何解决我面临的这个问题。 提前致谢。

Answer 1

我无法在您添加的代码段中查看它。 但我猜的是两个jQuery版本之间存在冲突。 尝试在ready()函数之前添加jQuery代码事件顶部的blow line。

$.noConflict();

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

第一次：

第二次：

jQuery网站上的更多信息

Answer 2

首次加载时，“mi-selected”类不会添加到您的代码中，这就是您遇到问题的原因。 您可以检查滑块js，实际上是什么问题。 是的，您也可以按照'noconflict'/ @ Roy的回答来检查您的问题是否已经解决