Приветствую, форумчане!
Знания языка JS у меня минимальные, могу лишь иногда интуитивно разбираться в коде, но помогает это редко
Надеюсь, что Вы мне поможете решить возникшую проблему
Суть проблемы:
Есть модальное окно с красивым анимированным открытием (взято на просторах интернета), в нём находится фрейм левой страницы с весомым скриптом, тут проблем в принципе нет, всё работает
Но скрипт с фрейма жрет много ресурсов. Проблема в том, что фрейм постоянно подгружен и при загрузке основной страницы сразу начинает работать.
Можно ли как то поправить скрипт модального окна, чтобы его содержимое подгружалось только при открытии самого окна и выгружалось при закрытии? Код JS прилагаю ниже, по необходимости могу скинуть CSS и HTML.
jQuery(document).ready(function($){
//cache some jQuery objects
var modalTrigger = $('.cd-modal-trigger'),
transitionLayer = $('.cd-transition-layer'),
transitionBackground = transitionLayer.children(),
modalWindow = $('.cd-modal');
var frameProportion = 1.78, //png frame aspect ratio
frames = transitionLayer.data('frame'), //number of png frames
resize = false;
//set transitionBackground dimentions
setLayerDimensions();
$(window).on('resize', function(){
if( !resize ) {
resize = true;
(!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300) : window.requestAnimationFrame(setLayerDimensions);
}
});
//open modal window
modalTrigger.on('click', function(event){
event.preventDefault();
var modalId = $(event.target).attr('href');
transitionLayer.addClass('visible opening');
var delay = ( $('.no-cssanimations').length > 0 ) ? 0 : 800;
setTimeout(function(){
modalWindow.filter(modalId).addClass('visible');
transitionLayer.removeClass('opening');
}, delay);
});
//close modal window
modalWindow.on('click', '.modal-close', function(event){
event.preventDefault();
transitionLayer.addClass('closing');
modalWindow.removeClass('visible');
transitionBackground.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
transitionLayer.removeClass('closing opening visible');
transitionBackground.off('webkitAnimationEnd oanimationend msAnimationEnd animationend');
});
});
function setLayerDimensions() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
layerHeight, layerWidth;
if( windowWidth/windowHeight > frameProportion ) {
layerWidth = windowWidth;
layerHeight = layerWidth/frameProportion;
} else {
layerHeight = windowHeight*1.2;
layerWidth = layerHeight*frameProportion;
}
transitionBackground.css({
'width': layerWidth*frames+'px',
'height': layerHeight+'px',
});
resize = false;
}
});
Заранее благодарю за помощь! И простите мне мою наглость, редко обращаюсь на форумы, но решить проблему нужно быстро, а знаний недостаточно