脚本每次都无法加载

Script fails to load each and every time

本文关键字：加载 脚本      更新时间：2023-09-26

我使用以下代码加载一个外部 HTML 文件，其中包含名为 Flexisel 的幻灯片脚本的代码：

    // ==UserScript==
// @run-at      document-start
// ==/UserScript==
$.ajax({
           type: "GET",
           url: "/JS/jquery.flexisel.js.html",
           success: function(){},
           dataType: "script",
           cache: false
        });
$(window).load(function() {
    $("#flexisel").flexisel({
        visibleItems: 5,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 2000,            
        pauseOnHover: true,
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints: { 
            portrait: { 
                changePoint:480,
                visibleItems: 1
            }, 
            landscape: { 
                changePoint:640,
                visibleItems: 2
            },
            tablet: { 
                changePoint:768,
                visibleItems: 3
            }
        }
    });
 });

当用户首次访问网站或访问他们以前从未访问过的页面时，此代码效果很好。不幸的是，在某些情况下，幻灯片无法加载，例如当用户单击浏览器中的后退按钮时。是否有更可靠的解决方案来确保始终正确加载此代码？

我有以下限制：

我必须使用这种方法，因为我使用的是功能非常有限的自定义电子商务解决方案。例如，我可以使用Tiny MCE上传文件(但仅限于有限的文件类型(。这就是为什么我使用包含JS代码而不是JS文件的HTML文件的原因。

我无法直接控制用于页面的布局或模板。

我可以创建自定义CSS和JavaScript脚本，但我无法控制加载它们的顺序(即我无法将它们放置在页面上(。

JQuery 是默认安装的，所以我可以访问一些功能(我不完全确定哪个版本(。

鉴于这些限制，任何关于加载此代码的更可靠方法的建议都将受到欢迎......

在我看来，问题是您的 ajax 响应可能不会加载，直到您运行脚本，因此 flexisel 插件在执行时不存在(？

在我看来，正确的方法是挂接到文档就绪事件，或者使用速记版本，并在 ajax 响应函数体中加载 flexisel：

$(function() {
  $.ajax({
     type: "GET",
     url: "/JS/jquery.flexisel.js.html",
     success: function(){
        $("#flexisel").flexisel({
            visibleItems: 5,
            animationSpeed: 1000,
            autoPlay: true,
            autoPlaySpeed: 2000,            
            pauseOnHover: true,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: { 
                portrait: { 
                    changePoint:480,
                    visibleItems: 1
                }, 
                landscape: { 
                    changePoint:640,
                    visibleItems: 2
                },
                tablet: { 
                    changePoint:768,
                    visibleItems: 3
                }
            }
        });
     },
     dataType: "script",
     cache: false
  });
});

如果这不起作用，您仍然可以尝试窗口加载:)

在运行脚本之前每次强制刷新页面

window.location = window.location
相关文章：