Форум

walker1232 · #1 (**permalink**) 05.12.2015, 08:09

Перехожу внутри сервера на страницу например контакты, а потом опять на эту страницу, а этот скрипт не загружается, подскажите что мне нужно исправить, чтобы это избежать ?
Кстати отлично работает только после перезагрузки страницы.

Может нужно весь код вынести в другой файл и подключить его, в <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"}

laimas · #2 (**permalink**) 05.12.2015, 08:23

Сообщение от walker1232

Перехожу внутри сервера на страницу например контакты, а потом опять на эту страницу

Страницы нужно формировать так -
шаблон шапки подключаемый ко всем страницам ибо 99% он будет одним и тем же
шаблон тела страницы
шаблон подвала

В зависимости от требований в шапке, а если можно, то лучше в подвале подключаем скрипты, и проблем с "потерялся" скрипт или еще что-то подключаемое не будет.

walker1232 · #3 (**permalink**) 05.12.2015, 08:31

Подключил скрипт через внешний файл, который находится в папке js, подключил в подвале aplication.html.erb, проблема осталась

laimas · #4 (**permalink**) 05.12.2015, 08:51

Ну вы же пишите что - "а скрипт не загружается", если же он подключен, не теряется, значит проблема в ином, значит тут уже проблемы иного плана, которые отладчик должен показать.

walker1232 · #5 (**permalink**) 05.12.2015, 09:07

Скрипт загружается после перезагрузки, а после перехода со страницы на страницу не происходит загрузки

laimas · #6 (**permalink**) 05.12.2015, 09:13

Сообщение от walker1232

после перехода со страницы на страницу не происходит загрузки

А что сие означает? Если он отсутствует на клиенте, значит его нет в подключаемых, то есть не подключается он. А причиной этого как раз то о чем говорилось выше.

Сообщение от walker1232

Подключил скрипт через внешний файл, который находится в папке js

Так подключаете вы его или же нет? Каталог может быть и не JS, важен путь, а если он относительный, то может быть и "пролет" в плане того, что путь указан неверный.

Проверить же это можно, в случае указания неверного пути отладчик также выдаст ошибку - 404. Проверяйте, чего гадать то.

walker1232 · #7 (**permalink**) 05.12.2015, 09:30

сейчас загружу пару скринов для ясности, на первом фото произошла загрузка после перезагрузки страницы.
На втором скрине я нажимаю на WORK, а потом опять на HOME где этот скрипт
И на третьем скрине видно что он не загружен..

walker1232 · #8 (**permalink**) 05.12.2015, 09:47

Может я как-то не правильно подключаю его, изначально он был у меня снизу моей страницы, в теге <script>, потом я переместил его в js файл папку js, я использую Ruby on Rails, добавил его вот так в шаблон боди в низ

<%= javascript_include_tag 'canvas' %>

и в config/initializers/assets.rb прописал следующее
Rails.application.config.assets.precompile += %w( canvas.js )

laimas · #9 (**permalink**) 05.12.2015, 15:24

Только без обид, я пьяный в дуплях, а посему только суть:

1) не важно каков серверный язык, если путь указан не верно, то это баг - проверить в отладчике
2) Rails.application.config.assets.precompile - это компиляция результата (сборка), а судя по вашему, нет подключения - проверять именно подключение по корректному пути

Форум

Справочник

Discord чат

Курсы javascript