Laravel Blade模板中原PHP页可用的JS图片轮播代码失效如何解决

• jQuery版本冲突
  你现有代码先后引入了jQuery1.10.2和jQuery3.5.1两个版本，后加载的高版本jQuery会覆盖之前挂载的所有插件方法，直接导致轮播逻辑、masonry布局方法失效。解决方式为删除末尾的jQuery3.5.1外部引入，仅保留一个版本的jQuery即可。
• 静态资源路径错误
  Laravel的所有公开可访问静态资源必须放在项目根目录的public文件夹下，你引用的js目录、pixs图片目录都需要迁移到public目录中，才能通过{{url()}}生成的链接正常访问。如果资源放在其他位置，浏览器请求会返回404错误，JS无法加载自然不会执行。
• 文件读取路径错误
  原生PHP中scandir("pixs")是基于当前运行文件的相对路径查找，在Laravel中需要使用public_path()方法定位public目录，将路径改为scandir(public_path('pixs'))才能正常读取到轮播图片列表。
• 缺失masonry插件引入
  你现有代码中未引入masonry布局插件，执行$('.grid').masonry('layout')时会抛出JS错误，中断后续代码执行，需要先引入对应masonry插件的JS文件。

修正后代码参考 #

JS引入部分 #

<!-- 仅保留一个版本jQuery，删除后续重复的jQuery3.5.1引入 -->
<script src="{{url('js/jquery-1.10.2.min.js')}}"></script>
<script src="{{url('js/jquery-migrate-1.2.1.js')}}"></script>
<script src="{{url('js/jHtmlArea-0.7.5.js')}}"></script>
<script src="{{url('jquery.center.min.js')}}"></script>
<script src="{{url('js/jquery.printElement.js')}}"></script>
<script src="{{url('js/jquery.backstretch.min.js')}}"></script>
<script src="{{url('js/jquery.highlight-3.js')}}"></script>
<!-- 补充引入masonry插件 -->
<script src="{{url('js/masonry.min.js')}}"></script>
<script src="{{url('js/main.js')}}"></script>

轮播逻辑部分 #

<script>
$(document).ready(function(){
    $("#slideshowx > div:gt(0)").hide();
    setInterval(function() {
        $('#slideshowx > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshowx');
        // 确认页面存在.grid元素再执行，避免报错
        if($('.grid').length > 0){
            $('.grid').masonry('layout');
        }
    }, 4000);
});
</script>

Blade模板HTML部分 #

<div id="slideshowx" style="margin:0px auto;position:relative;width:100%;max-width:540px;padding:0px;border:0px solid #00ff00;">
    <img src="{{url('images/blank.png')}}" border="0" style="width:100%;border-radius:5px;border:0px solid #AAAAAA;object-fit:fill;">
    @php
        $number=1;
        $pixs = array_diff(scandir(public_path('pixs')), array('..', '.'));
    @endphp
    @foreach($pixs as $src)
    <div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;border-radius:5px;width:100%;max-width:540px;border:0px solid #00FF00;overflow:hidden;">
        <img src="{{url('pixs/'.$src.'?t='.time())}}" border="0" style="width:100%;border-radius:5px;border:0px solid #AAAAAA;object-fit:fill;">
        @php $number++; @endphp
    </div>
    @endforeach
</div>

调试方式 #

打开浏览器F12开发者工具：

1. 切换到「网络/Network」标签，刷新页面确认所有JS、图片资源都加载成功，没有404错误
2. 切换到「控制台/Console」标签，查看是否有JS报错，根据报错信息定位具体问题

内容的提问来源于stack exchange，提问作者Gregory Butts