Question

我有一个jquery函数，我只想在第一次加载页面时运行，不是刷新后。

以下是代码：

$(window).on("load",function() {
    $("#logo-black").typed({
        strings: ["Nothing^450&Co^250.^500", "^800__^400&Co^600."],
        typeSpeed: 70,
        backSpeed: 100,
    callback: function() {
        $(".typed-cursor").css("display", "none"),
        setTimeout(function(){
            $('.main-load').toggleClass('main-load-active'),
            $('.nav-text').toggleClass('nav-text-active');
        },400),
        $('.nav-reveal').toggleClass('nav-reveal-active');
        }
    });
});

需要注意的一些事项： - 我正在使用barba.js，因此通过AJAX添加/删除内容。

为我的项目初始化barba.js的代码：

initFullpagePlugin();

function initFullpagePlugin (parentElement) {
var element;

element = parentElement ? $('#fullpage', parentElement) : 
$('#fullpage');

if (element.length) {

  // Destroys old fullPage.js object in memory,
  // removes elements from DOM
  if ($.fn.fullpage.destroy) {
    $.fn.fullpage.destroy('all');
  }
  element.fullpage({
    //Scrolling
    autoScrolling:false,
    scrollingSpeed: 2500,
    easing: 'swing',
    fitToSection: false
  });
}
}

document.addEventListener("DOMContentLoaded", function() {
if (!('webkitClipPath' in document.body.style)) {
alert('Sorry, this demo is available just with webkitClipPath. Try with 
Chrome/Safari.');
}

Barba.Pjax.init();
Barba.Prefetch.init();


var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
 * This function is automatically called as soon the Transition starts
 * this.newContainerLoading is a Promise for the loading of the new 
container
 * (Barba.js also comes with an handy Promise polyfill!)
 */

// As soon the loading is finished and the old page is faded out, let's 
fade the new page
Promise
  .all([this.newContainerLoading, this.fadeOut()])
  .then(this.fadeIn.bind(this));
},

fadeOut: function() {
/**
 * this.oldContainer is the HTMLElement of the old Container
 */

return $(this.oldContainer).animate({ opacity: 0 }).promise();
},

fadeIn: function() {
/**
 * this.newContainer is the HTMLElement of the new Container
 * At this stage newContainer is on the DOM (inside our #barba-
container and with visibility: hidden)
 * Please note, newContainer is available just after 
newContainerLoading is resolved!
 */
document.body.scrollTop = 0;
var _this = this;
var $el = $(this.newContainer);

$(this.oldContainer).hide();

$el.css({
  visibility : 'visible',
  opacity : 0
});

initFullpagePlugin($el);

$el.animate({ opacity: 1 }, 400, function() {
  /**
   * Do not forget to call .done() as soon your transition is finished!
   * .done() will automatically remove from the DOM the old Container
   */
  _this.done();
});
}
});

/**
* Next step, you have to tell Barba to use the new Transition
*/

Barba.Pjax.getTransition = function() {
/**
 * Here you can use your own logic!
 * For example you can use different Transition based on the current 
 page or link...
 */

 return FadeTransition;
 };
});

$('.no-click').on("click", function(e) {
e.preventDefault();
});

例如，this design studio有一个动画，在您第一次加载主页时运行，但在刷新后不。（注意：这似乎只适用于移动版本，但这正是我想要实现的。我正在动画的元素出现在每个页面上，因此确保它仅在首次加载时触发，并且仅在索引上触发.html是我正在拍摄的东西）

感谢任何帮助/建议/建设性批评！

Answer 1

在客户端上执行的代码在加载之间是无状态的。如果您想记住从页面加载到页面加载的状态，您可以：

跟踪后端的会话。
在客户端的浏览器中使用Cookie /本地存储。

Answer 2

您可以从服务器端轻松完成此操作。

检查referrer header。如果它不存在，或者它与当前请求中的URL不同，请继续发出jquery函数，以便在页面加载到浏览器时执行。当它与当前请求中的URL相同时，只需保留jquery脚本以使其无法运行。

如果页面是100％静态的，您无法执行此类操作，请参阅Chase的回答。

Answer 3

您可以使用transitionCompleted函数加载脚本。

Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) {

    if (prevStatus) {
        setTimeout(function() {

            // call your script

        }, 1000);
    }

});

请记住，每次加载新页面时都会触发barba.js事件transitionCompleted。

页面加载后运行功能但不刷新

3 个答案: