• 100001 : https://yearinmusic.spotify.com/ но я не хочу использовать tweenlite только для индикатора выполнения. Есть ли возможность получить его только с помощью jquery? но не индикатор выполнения jquery ui, я действительно хочу, чтобы мой собственный индикатор выполнения загружал меньше плагинов, насколько это возможно.

Ответы (2)

это несколько фреймворков javascript, которые позволяют создавать индикатор выполнения веб-страницы, и я рекомендую pace.js и NProgress.js, потому что они очень просты и легко реализовать

Чтобы скрыть объект, когда сторона полностью загружена, вы можете использовать следующий код jquery:

$(document).ready(function(){
    setTimeout(function () {
    $('#yourProgressBar').fadeOut("medium");
    }, 500);
}

Значение, переданное в fadeOut () в виде строки или целого числа, определяет длительность перехода затухающей анимации.

Функции setTimeout () добавляют приятный эффект задержки, так что индикатор выполнения исчезает только после указанной продолжительности (здесь 500 мс).

Чтобы сделать сам индикатор выполнения, вы должны либо сделать это самостоятельно, либо использовать один из многочисленных плагинов. Вы уже упоминали индикатор выполнения jQueryUI. По моему скромному мнению, индикатор выполнения bootstrap также весьма хорош. Что хорошо в функциях bootstrap и jqueryUI, так это то, что вы можете выбрать, какую часть фреймворка / плагинов вы хотите включить, поэтому вам не нужно включать весь пакет.

Однако, если вы хотите что-то сверхлегкое, вот схема того, как самому сделать прогресбар:

  • Создание индикатора выполнения объекта с заданной относительной или абсолютной шириной.
  • Теперь либо манипулируйте фоном индикатора выполнения, либо добавьте еще один элемент в индикатор выполнения и измените его длину.
    • Как это сделать? Подумайте о том, что нашей странице нужно больше всего времени для загрузки. Скорее всего изображения. Вы можете добавить класс ко всем img-тегам на нашей html-странице простым способом $ ("img"). AddClass ("prBar");. Теперь каждый раз при одной из этих нагрузок вы делаете успехи в своей планке. На сколько? Что ж, прогресс должен быть равен ширине полосы, разделенной на количество элементов с классом «prBar». Это вычисляется следующим образом: var dWidth = $ ('# yourProgressBar'). OffsetWidth / $ ('. PrBar'). Length;

Еще одна подсказка: вы можете увеличить ширину полосы прогресса при загрузке каждого элемента, вызвав что-то вроде $ (". PrBar"). Load (function () {...});

Надеюсь, это поможет вам построить желаемый код. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь спрашивать:)

2022 WebDevInsider