jQuery загрузка экрана в чистый JavaScript

-1

У меня есть сценарий сценария загрузки, который я хотел бы реализовать в проекте.jQuery загрузка экрана в чистый JavaScript

Однако для этого требуется jQuery. И поскольку ни одному из элементов на странице не нужен jQuery, я бы хотел сэкономить некоторое пространство и не добавлять его.

Есть ли способ предоставить точно такую же функцию с использованием чистого JavaScript?

HTML:

<body onload="hide_preloader();">  
<div class="preloader"> <div class="loader"></div> </div> 
</body>

JQuery:

jQuery(window).load(function() { rotate = 0; $(".preloader").fadeOut(250); });

Благодаря

источник

2013-11-07 Borsn

Исходный код jQuery доступен для поиска, см., Как он реализует 'fadeOut()'. – Barmar

Поскольку jQuery * is * чистый JavaScript: Да. – Quentin

Если вы используете jQuery на других страницах, то это ложная экономика, чтобы избежать ее на одной странице, так как она будет кэширована после первого запроса. И если вы используете CDN, например Google, скорее всего, он будет кэшироваться. Вы делаете свое приложение более сложным, избегая jQuery на одной странице и используя время, которое лучше всего потрачено в другом месте. – RedFilter

Да, это на самом деле удивительно легко. Вместо этого вы можете сделать переход с CSS переходами.

Во-первых, давайте определим некоторые CSS:

.preloader { 
    transition: opacity 0.25s linear; /* when we change the opacity, use these transition settings */ 
} 

.preloader.fade { 
    opacity: 0; /* when we add the class fade, set the opacity to 0 using the above transition */ 
}

Теперь мы просто должны добавить fade класс с помощью Javascript:

window.onload = function() { 
    var preloader = document.getElementsByClassName('preloader')[0]; 

    preloader.className += ' fade'; 

    setTimeout(function(){ 
     preloader.style.display = 'none'; 
    }, 300); 
};

Браузеры, которые не понимают transition установит opacity в 0 немедленно , а в качестве абсолютного отказоустойчивости (например, для браузеров, которые не понимают opacity), мы установили display в none после второго навсегда Йон.

jsFiddle showing this effect. (Очевидно, вы будете отличать .preloader.)

источник

2013-11-07 15:01:46 lonesomeday

Смогу ли я получить доступ к содержанию ниже? – Borsn

@Boris Как вы можете видеть [если я приостанавливаю анимацию] (http: // jsfiddle.net/lonesomeday/G247Q/1 /), вы можете взаимодействовать с элементами с меньшей прозрачностью. Очевидно, это относится и к «непрозрачности: 0» и «display: none». Отвечает ли это на ваш вопрос? – lonesomeday

Абсолютно. Благодарю. – Borsn

попробовать что-то вроде этого:

// taken from http://stackoverflow.com/q/13733912/2332336 
function fade(element) { 
    var op = 1; // initial opacity 
    var timer = setInterval(function() { 
     if (op <= 0.1){ 
      clearInterval(timer); 
      element.style.display = 'none'; 
     } 
     element.style.opacity = op; 
     element.style.filter = 'alpha(opacity=' + op * 100 + ")"; 
     op -= op * 0.1; 
    }, 50); 
}

и этот HTML:

<body onload="fade(document.getElementById('preloader'));"> 
    <div id="preloader"> <div class="loader"></div> </div> 
</body>

источник

2013-11-07 14:56:51 Latheesan

Это должно работать:

window.onload = function(){ 
    var preloader = document.querySelector('.preloader'); 

    var startTime = new Date().getTime(); 
    function fadeOut(){ 
    var passedTime = new Date().getTime() - startTime; 
    var opacity = Math.max(250/(250 - passedTime), 0); 
    preloader.style.opacity = opacity; 
    if(opacity){ 
     setTimeout(fadeOut, 0); 
    } 
    } 
    setTimeout(fadeOut, 0); 
}

источник

2013-11-07 14:59:46 Borre

Почему бы просто не добавить класс, на котором есть переход? Разве это не избыток? – Archer

Очень верно, хотя это будет работать только на современных браузерах. – Borre

Вы не можете точно получить доступ к содержимому ниже. У меня установлен 'z-index'' 10. – Borsn

jQuery загрузка экрана в чистый JavaScript

ответ

Смежные вопросы