Не работает скрипт при переходе на другую страницу и назад
Перехожу внутри сервера на страницу например контакты, а потом опять на эту страницу, а этот скрипт не загружается, подскажите что мне нужно исправить, чтобы это избежать ?
Кстати отлично работает только после перезагрузки страницы.:blink: Может нужно весь код вынести в другой файл и подключить его, в <head> а на этой странице оставить только onload?
/**
* @class Circle
* @constructor
*/
var Circle = function (canvas, callback) {
/**
* @type {HTMLCanvasElement}
* @private
*/
this._canvas = canvas;
/**
* @type {CanvasRenderingContext2D}
* @private
*/
this._ctx = canvas.getContext('2d');
/**
* @type {number}
* @private
*/
this._animateSpeed = 20;
/**
* @type {number}
* @private
*/
this._endProgress = Number(this._canvas.getAttribute('data-percent'));
/**
* @type {string}
* @private
*/
this._bgColor = this._canvas.getAttribute('data-bg-color');
/**
* @type {string}
* @private
*/
this._color = this._canvas.getAttribute('data-color');
this._coloor = this._canvas.getAttribute('data-coloor');
/**
* @type {Array<function>}
* @private
*/
this._onReadyCallbacks = [];
/**
* @type {boolean}
* @private
*/
this._isReady = false;
/**
* @type {function}
* @private
*/
this._onEndAnimation = callback;
/**
* @type {number}
* @private
*/
this._radius = this._canvas.width / 2 - 3;
/**
* @type {number}
* @private
*/
this._width = this._canvas.width;
/**
* @type {number}
* @private
*/
this._height = this._canvas.height;
this._onScroll = this._onScroll.bind(this);
this._initialize();
};
/**
* @lends Circle#
*/
Circle.prototype = {
setReady: function () {
this._isReady = true;
this._onReadyCallbacks.forEach(function (callback) {
callback.call(this);
}, this);
this._onReadyCallbacks = [];
},
/**
* @param {function} callback
* @private
*/
_onReady: function (callback) {
if (this._isReady) {
callback.call(this);
} else {
this._onReadyCallbacks.push(callback);
}
},
/**
* @returns {boolean}
* @private
*/
_isVisible: function () {
var scroll = this._getScrollTop();
var offset = this._canvas.offsetTop;
return (scroll < offset) && (scroll + innerHeight > offset + this._canvas.height);
},
/**
* @returns {number}
* @private
*/
_getScrollTop: function () {
return document.body.scrollTop || document.documentElement.scrollTop;
},
/**
* @private
*/
_animate: function () {
var time = this._endProgress * this._animateSpeed;
Circle._animate({
duration: time,
step: this._redraw.bind(this),
complete: this._onEndAnimation
});
window.removeEventListener('scroll', this._onScroll, false);
},
/**
* @private
*/
_clear: function () {
this._canvas.width = this._canvas.width;
},
/**
* @param {number} progress
* @private
*/
_draw: function (progress) {
var angleStart = - Math.PI / 2;
var angleEnd = angleStart + (2 * Math.PI * this._endProgress / 100) * progress;
this._ctx.beginPath();
this._ctx.strokeStyle = this._bgColor;
this._ctx.lineWidth = 2;
this._ctx.arc(this._width / 2, this._height / 2, this._radius, 0, Math.PI * 2, false);
this._ctx.stroke();
this._ctx.beginPath();
this._ctx.strokeStyle = this._color;
this._ctx.lineWidth = 2;
this._ctx.arc(this._width / 2, this._height / 2, this._radius, angleStart, angleEnd, false);
this._ctx.stroke();
this._ctx.fillStyle = this._coloor;
this._ctx.font = "bold 32px Verdana";
var text = Math.floor(this._endProgress * progress) + "%";
var text_width = this._ctx.measureText(text).width;
this._ctx.fillText(text, this._width / 2 - text_width / 2, this._height / 2 + 15);
},
/**
* @param {number} progress
* @private
*/
_redraw: function (progress) {
this._clear();
this._draw(progress);
},
_setHandlers: function () {
window.addEventListener('scroll', this._onScroll, false);
},
_onScroll: function () {
if (this._isVisible()) {
this._animate();
}
},
/**
* @private
*/
_initialize: function () {
this._onReady(function () {
if (this._isVisible()) {
this._animate();
} else {
this._setHandlers();
}
});
this._draw(0);
}
};
/**
* @param {Object} options
* @param {function} options.step
* @param {number} options.duration
* @param {function} options.complete
* @param {function} [options.timeFunction]
* @private
* @static
*/
Circle._animate = function (options) {
var start = Date.now(); // сохранить время начала
requestAnimationFrame(function tick() {
var timePassed = Date.now() - start;
var progress = timePassed / options.duration;
var timeFunction = options.timeFunction || function (progress) {
return progress;
};
progress = progress > 1 ? 1 : progress;
options.step(timeFunction(progress));
if (progress === 1) {
options.complete();
} else {
requestAnimationFrame(tick);
}
});
};
window.onload = function () {
var canvases = Array.prototype.slice.call(document.querySelectorAll('.canvas'));
var circles = [];
var animateEndCount = 0;
var onEnd = function () {
animateEndCount++;
if (circles[animateEndCount]) {
circles[animateEndCount].setReady();
}
};
canvases.forEach(function (canvas) {
circles.push(new Circle(canvas, onEnd));
});
circles[0].setReady();
};
canvas.canvas{"data-bg-color" => "#e4e4e4", "data-coloor" => "#222", "data-color" => "#16a6b6", "data-percent" => "40", :height => "120", :width => "120"}
%canvas.canvas{"data-bg-color" => "#e4e4e4", "data-coloor" => "#222", "data-color" => "#16a6b6", "data-percent" => "80", :height => "120", :width => "120"}
%canvas.canvas{"data-bg-color" => "#e4e4e4", "data-coloor" => "#222", "data-color" => "#16a6b6", "data-percent" => "57", :height => "120", :width => "120"}
%canvas.canvas{"data-bg-color" => "#e4e4e4", "data-coloor" => "#222", "data-color" => "#16a6b6", "data-percent" => "83", :height => "120", :width => "120"}
%canvas.canvas{"data-bg-color" => "#e4e4e4", "data-coloor" => "#222", "data-color" => "#16a6b6", "data-percent" => "90", :height => "120", :width => "120"}
|
Цитата:
шаблон шапки подключаемый ко всем страницам ибо 99% он будет одним и тем же шаблон тела страницы шаблон подвала В зависимости от требований в шапке, а если можно, то лучше в подвале подключаем скрипты, и проблем с "потерялся" скрипт или еще что-то подключаемое не будет. |
Подключил скрипт через внешний файл, который находится в папке js, подключил в подвале aplication.html.erb, проблема осталась
|
Ну вы же пишите что - "а скрипт не загружается", если же он подключен, не теряется, значит проблема в ином, значит тут уже проблемы иного плана, которые отладчик должен показать.
|
Скрипт загружается после перезагрузки, а после перехода со страницы на страницу не происходит загрузки
|
Цитата:
Цитата:
Проверить же это можно, в случае указания неверного пути отладчик также выдаст ошибку - 404. Проверяйте, чего гадать то. |
Вложений: 3
сейчас загружу пару скринов для ясности, на первом фото произошла загрузка после перезагрузки страницы.
На втором скрине я нажимаю на WORK, а потом опять на HOME где этот скрипт И на третьем скрине видно что он не загружен.. |
Может я как-то не правильно подключаю его, изначально он был у меня снизу моей страницы, в теге <script>, потом я переместил его в js файл папку js, я использую Ruby on Rails, добавил его вот так в шаблон боди в низ
<%= javascript_include_tag 'canvas' %> и в config/initializers/assets.rb прописал следующее Rails.application.config.assets.precompile += %w( canvas.js ) |
Только без обид, я пьяный в дуплях, а посему только суть:
1) не важно каков серверный язык, если путь указан не верно, то это баг - проверить в отладчике 2) Rails.application.config.assets.precompile - это компиляция результата (сборка), а судя по вашему, нет подключения - проверять именно подключение по корректному пути |
| Часовой пояс GMT +3, время: 04:13. |