Question

我有这个jQuery：

jQuery(document).ready(function($) {
    // When the page is loading show the #preloader element 
    $("#preloader").fadeOut("slow");
    $("#page-container").fadeIn("slow");
    // When an article with article grid is clicked, display the loader
    $("a").on("touchstart click", function() { 
        $("#preloader").fadeIn("slow"); 
        });
});

应如何工作：

页面加载并立即显示#preloader元素。页面加载后，＃preloader元素就会淡出，而＃page-container会淡入。
然后，当您单击链接时，＃preloader元素会在浏览器加载下一页时淡入。返回步骤1。

因此页面加载之间存在无缝过渡。

这在Firefox和Chrome上效果很好。但是在Safari和所有iOS浏览器上，第2步中的click事件不起作用。 #preloader元素不会在新页面加载之前淡入。

我尝试添加preventDefault，使#preloader元素逐渐淡入，但随后浏览器从未重定向到新页面。

有什么想法吗？

Answer 1

解决了这个问题。这是我最终使用的内容：

jQuery(document).ready(function($) {
    // When the page is loading show the #preloader element 
    $("#preloader").fadeOut("slow");
    $("#page-container").fadeIn("slow");
    // When an link is clicked, display the loader
    $("a").on("touchstart click", function() { 
        event.preventDefault();
        newLocation = this.href;
        $("#preloader").fadeIn("slow", newpage); 
    });
    function newpage() {
        window.location = newLocation;
    }
});

为什么单击事件在MacOS Safari上不起作用？

1 个答案: