animacja podczas ładowania strony

Adres forum:
https://bravo.net.pl


Wersja silnika:
1.8.x


Opis problemu:
chciałbym przetestować taki bajer, jak w tytule. W sieci znalazłem poradnik do uzyskania tego efektu: https://community.mybb.com/archive/index...26447.html, jednak sądząc po dacie dotyczy on silnika 1.6 - czy opisany tam sposób będzie działał z 1.8? A jeśli tak, to w którym miejscu zamieścić ten fragment kodu:

<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
 jQuery('#preloader').fadeOut(300, function() {
   jQuery('body').css('overflow','visible');
   jQuery(this).remove();
 });
});
</script>

według opisu należy go wkleić po {$newpmmsg} w szablonie headerinclude, jednak ja takiej frazy tam nie widzę.

$.noConflict();
$(window).load(function() {
$('#preloader').fadeOut(300, function() {
   $('body').css('overflow','visible');
   $(this).remove();
});
});

Wklej to np. pod <script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=18**"></script> albo inny tag 'script'. Ważne, byś wkleił to PO miejscu, w którym dodawana jest biblioteka jquery

dzięki - działa, ale powstało parę problemów. Dodanie jquery.min.js wydaje się kolidować np. z działaniem pluginu MyProfile, który m.in. umożliwia pisanie komentarzy na profilach. Po dodaniu jquery.min.js klikanie na profilu w button mający dodać komentarz nie powoduje żadnej widocznej reakcji. Więc tymczasowo sobie chyba tę całą animację odpuszczę.

Pokaż swój szablon headerinclude. Jeśli dobrze zrozumiałem, dodałeś dodatkowo bibliotekę jquery, ale MyBB ma już ją domyślnie, przez co mogły wyjść te wszystkie błędy, o których mówisz. Spróbuj usunąć to jquery.min.js i zobacz czy wszystko wróci do normy

Jeśli dobrze zrozumiałem, dodałeś dodatkowo bibliotekę jquery, ale MyBB ma już ją domyślnie

właśnie też to zauważyłem. Wcześniej po usunięciu jquery.min.js po prostu wyświetlał się gif i tak zostawał. Jednak po bliższym przyjrzeniu się szablonowi headerinclude znalazłem fragment, który najwyraźniej odpowiadał za te wszystkie błędy, a mianowicie funkcja addLoadEvent:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<link rel="icon" type="image/png" href="{$mybb->asset_url}/favicon.png" />
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="revisit-after" content="1 day" />
<meta name="robots" content="index,follow" />
<meta name="description" content="bravo.net.pl - blog" />
<meta name="keywords" content="bravo.net.pl, blog, blogi" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1806"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1806"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1807"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/whcookies.js"></script>
<script type="text/javascript">
function preloader() {
  if (document.images) {
    imglogo = new Image();
    img_icon1 = new Image();
    img_icon2 = new Image();
    img_icon3 = new Image();
    img_icon4 = new Image();
    img_icon5 = new Image();
    img_icon6 = new Image();
    img_icon7 = new Image();
    img_icon8 = new Image();
    img_icon9 = new Image();
    imglogo.src = "images/logo_christmas_2019c.png";
    img_icon1.src = "images/privatebox3.png";
    img_icon2.src = "images/privatebox2.png";
    img_icon3.src = "images/privatebox1.png";
    img_icon4.src = "images/private_box.png";
    img_icon5.src = "images/settings3.png";
    img_icon6.src = "images/settings2.png";
    img_icon7.src = "images/settings.png";
    img_icon8.src = "images/key8.png";
    img_icon9.src = "images/profile.png";
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  }
  else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(preloader);
</script>

<script type="text/javascript">
<!--
  lang.unknown_error = "{$lang->unknown_error}";

  lang.select2_match = "{$lang->select2_match}";  
  lang.select2_matches = "{$lang->select2_matches}";
  lang.select2_nomatches = "{$lang->select2_nomatches}";
  lang.select2_inputtooshort_single = "{$lang->select2_inputtooshort_single}";
  lang.select2_inputtooshort_plural = "{$lang->select2_inputtooshort_plural}";
  lang.select2_inputtoolong_single = "{$lang->select2_inputtoolong_single}";
  lang.select2_inputtoolong_plural = "{$lang->select2_inputtoolong_plural}";
  lang.select2_selectiontoobig_single = "{$lang->select2_selectiontoobig_single}";
  lang.select2_selectiontoobig_plural = "{$lang->select2_selectiontoobig_plural}";
  lang.select2_loadmore = "{$lang->select2_loadmore}";
  lang.select2_searching = "{$lang->select2_searching}";

  var cookieDomain = "{$mybb->settings['cookiedomain']}";
  var cookiePath = "{$mybb->settings['cookiepath']}";
  var cookiePrefix = "{$mybb->settings['cookieprefix']}";
  var deleteevent_confirm = "{$lang->deleteevent_confirm}";
  var removeattach_confirm = "{$lang->removeattach_confirm}";
  var loading_text = '{$lang->ajax_loading}';
  var saving_changes = '{$lang->saving_changes}';
  var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
  var my_post_key = "{$mybb->post_code}";
  var rootpath = "{$mybb->settings['bburl']}";
  var imagepath = "{$theme['imgdir']}";
  var yes_confirm = "{$lang->yes}";
  var no_confirm = "{$lang->no}";
  var MyBBEditor = null;
  var spinner_image = "{$theme['imgdir']}/spinner.gif";
  var spinner = "<img src='" + spinner_image +"' alt='' />";
  var modal_zindex = 9999;
// -->
</script>
<script type="text/javascript">
  var prevScrollpos = window.pageYOffset;
  var prevHorizScrollpos = window.pageXOffset;
  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    var currentHorizScrollPos = window.pageXOffset;
    document.querySelector("#header").style.left = -document.documentElement.scrollLeft-document.body.scrollLeft+"px";
    if (document.documentElement.scrollTop + document.body.scrollTop <= 0) {
// wysuniecie logo
    var headerHeight7 = document.querySelector("#header").offsetHeight;
    document.querySelector("#content").style.margin = headerHeight7+"px 0px 0px 0px";
    document.getElementById('header').style.top = "0";
  }
  else if (document.documentElement.scrollTop + document.body.scrollTop != 0) {
// schowanie logo
    var logoHeight = document.querySelector("#logo").offsetHeight;
    document.getElementById('header').style.top = "-"+logoHeight+"px";
  }
  prevScrollpos = currentScrollPos;
}
window.onresize = function() {
  document.querySelector("#header").style.width = document.querySelector("#content").offsetWidth+"px";
  document.querySelector("#xprofile_buddylist").style.width = document.querySelector("#bg_content_topcenter").clientWidth - {$theme['tablespace']} + "px";
}
</script>
{$stylesheets}{$myprofile_headerinclude}

Po umieszczeniu

$('#preloader').fadeOut(300, function() {
  $('body').css('overflow','visible');
  $(this).remove();
});

na końcu funkcji preloader() błędy zniknęły. Nie wiem tylko, do czego służy to:

$.noConflict();

i gdzie to wsadzić, ani w ogóle czy to co zrobiłem ma sens