Блог

Главная - Вопросы по программированию - Не показывать содержимое js во время загрузки страницы

Не показывать содержимое js во время загрузки страницы

#javascript #jquery #twitter-bootstrap

#javascript #jquery #twitter-bootstrap

Вопрос:

Я столкнулся со следующей проблемой: у меня есть простой javascript — раздел ( .custom-social-proof ) с другой загрузкой и вращением содержимого. Все в порядке, за исключением одного момента — часто, пока страница не будет полностью загружена, я вижу все элементы. Что я делаю не так? Я новичок в javascript, поэтому буду очень благодарен за помощь.

 (function(jQuery){
    jQuery.fn.extend({ 
        rotaterator: function(options) {
 
            var defaults = {
                fadeSpeed: 900,
                pauseSpeed: 9000,
				        child:null
            };
             
            var options = jQuery.extend(defaults, options);
         
            return this.each(function() {
                  var o =options;
                  var obj = jQuery(this);                
                  var items = jQuery(obj.children(), obj);
				  items.each(function() {jQuery(this).hide();})
				  if(!o.child){var next = jQuery(obj).children(':first');
				  }else{var next = o.child;
				  }
				  jQuery(next).slideToggle(o.fadeSpeed, function() {
						jQuery(next).delay(o.pauseSpeed).slideToggle(o.fadeSpeed, function() {
              
							var next = jQuery(this).next();
							if (next.length == 0){
									next = jQuery(obj).children(':first');
							}
              
              setTimeout(function() {
							jQuery(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
              }, 9000); // pause between slides
						})
					});
            });
        }
    });
})(jQuery);  
 .custom-social-proof {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999999999999 !important;
}
.custom-social-proof .custom-notification {
    width: auto;
    min-width: 280px;
    text-align: left;
    z-index: 99999;
    box-sizing: border-box;
    font-weight: 400;
    box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.08);
    border-radius: 50px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    padding: 10px 15px;
    border: 2px solid #344bc1;
}
.custom-social-proof .custom-notification .custom-notification-container {
    display: flex !important;
    align-items: center;
    height: 80px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img {
    max-height: 50px;
    width: 50px;
    padding: 0px 5px 0px 10px;
    object-fit: cover;
}
.custom-social-proof .custom-notification .custom-notification-container .warning {
    border: 1px;
    background-color: #fbe8e8;
    border-color: #ffa9a9;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper {
    margin: 0;
    height: 100%;
    color: gray;
    padding-left: 10px;
    padding-right: 20px;
    border-radius: 0 50px 50px 0;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}
.custom-notification-image-wrapper.pulse img {
    margin-top: 0;
}
.custom-notification-content strong {
    color: #575757;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content {
    font-family: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 18px;
    color: #616161;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a {
    color: #354cc5;
    text-decoration-color: #354cc5;
	font-size: 18px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a:hover {
    color: #354cc5;
    text-decoration-color: #354cc5;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small {
  margin-top: 3px !important;
  display: block !important;
  font-size: 12px !important;
  opacity: 0.8;
}
.custom-social-proof .custom-notification .custom-close {
  position: absolute;
  top: 8px;
  right: 28px;
  height: 12px;
  width: 12px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  transform: rotate(45deg);
  opacity: 0;
}
.custom-social-proof .custom-notification .custom-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: gray;
  position: absolute;
  left: 0;
  top: 5px;
}
.custom-social-proof .custom-notification .custom-close::after {
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  background-color: gray;
  position: absolute;
  left: 5px;
  top: 0;
}
.custom-social-proof .custom-notification:hover .custom-close {
  opacity: 1;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="all-social-proofs"> 
    <section class="custom-social-proof"><!-- Popup item 1 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
    <section class="custom-social-proof"><!-- popup item 2 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
    <section class="custom-social-proof"><!-- popup item 2 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
    <section class="custom-social-proof"><!-- popup item 2 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
             
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
</div>

<script>
jQuery(document).ready(function() {
        jQuery('#all-social-proofs').rotaterator();
 });
</script>

Комментарии:

1. Какое серверное программное обеспечение вы используете? Вы пытались включить буферизацию вывода?

2. Это абсолютно обычный хостинг с сервером на базе Apache

Ответ №1:

Вы можете скрыть родительский класс по умолчанию, а затем открыть его, как только вы спрятали дочерние элементы.

 <div id="all-social-proofs" style="display:none"> 
  ...

и

  jQuery(document).ready(function() {
        jQuery('#all-social-proofs').rotaterator();
        jQuery('#all-social-proofs').show();
 });