Wątek przeniesiony 2023-12-21 14:35 z JavaScript przez Riddle.

Poskładanie dwóch skryptów

0

Witam po dłuższej przerwie,
Mam problem z dwoma skryptami na stronie.
Pokrótce: strona jest zbudowana na trochę archaicznym schemacie (ale to działa 🙂 ). Niemniej problem jest.
Chodzi mianowicie o skrypt wczytywania podstron, "ładowanie" strzałki przesuwania "do góry", komunikat że "to podstrona" oraz obsługę slajdera.
Swego czasu dostałem skrypt 90348=wczytywanie-v2-eng link
Na jego podstawie "udało?" mi się wymodzić 9403=compressed4 link
Niestety coś (na pewno) chyba jest skopane - co prawda strony ładują się ALE z oporami, bo podstrony dostają drgawek po wczytaniu i próbie przesuwania, a trzeba też odczekać nieraz dłuższą chwilę zanim można przesunąć treść. W wersji mobile nie ukazuje się też strzałka przesuwania "do góry".
Wczytywanie ich jako async albo defer niezbyt pomaga, albo prawie wcale.
Jako że opanowanie tajników .js przerasta mój przedział wiekowy, czy można poprosić o rozwiązanie tego problemu.

/*global $*/
window.addEventListener('load', function (e) { // wykonac po zaladowaniu dokumentu;
 
// rozpoznaje glowna strona po tym, ze istnieje div o id-ku "maincontainer" albo id contentcolumn dla nowego ukladu;
  var isHomePage = document.getElementById('maincontent') ? true : false;
  // wczytaj dodatkowy CSS;
  var loadCss = function () {
    if (!document.getElementById('home-link-css')) {
        // tworzymy nowy element 'link', ktory dodajemy do head-a;
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id = 'home-link-css';
        link.rel = 'preload stylesheet';
        link.as = 'style';
        link.type = 'text/css';
        link.href = 'home-link.css';
        link.media = 'all';
        head.appendChild(link);
    }
  };
  // dodaje link prowadzacy do glownej strony
  var addHomeLink = function () {
    var homeLink = document.createElement("a"); // element;
    homeLink.innerHTML = "It's just a sub-page - go back to the menu page"; // tekst;
    homeLink.href = "http://mtkosciuszko.org.au/welcome-eng.php"; // URL do portalu;
    homeLink.title = "Back to the menu page";
    homeLink.classList.add("home-link"); // dodaj klase;
    var parent = document.getElementsByClassName('cala')[0];
    var firstChild = parent.firstChild;
    if (!firstChild) { return; }
    parent.insertBefore(homeLink, firstChild);
  }
  // aktywacja menu + wczytywanie stron do kontenera;
  var initMenu = function () {
 
    if (typeof $ == 'undefined') { return; } // bez jQuery nie kontynuujemy;
    var content = $('#maincontent'); // kontener dla tresci strony albo contentcolumn;
    var defaultTitle = document.title; // domyslny tytul strony;
      $('.openToDiv').on('click', function(event)) { // event typu 'onClick' dla elementow menu;
      event.preventDefault(); // ignorujemy domyslne zachowanie
      var item = $(this); // obiekt jQuery elementu;
      var url = item.attr('href'); // URL z elementu;
      var title = item.attr('title') || defaultTitle; // tytul
      if (!url) { return false; } // jezeli brak adresu to przerywam operacje;
      $.get(url, function(response) { // tutaj request za pomoca get-a;
        content
          .html(response) // wprowadz tresc do kontenera;
          .animate({scrollTop:0}); // kontener przewin do gory
        content.find('.home-link').remove();
        document.title = title; // ustaw tytul z elementu;
      });
    });
 
    // o ile klasa nie jest ostylowana to nie jest potrzebna;
    // (to tez zapobiega ponownemu nadaniu event-u przez nadmiarowe skrypty)
    $('.openToDiv').toggleClass('openToDiv');
  };
 
  if (!isHomePage) { addHomeLink(); loadCss(); } // dodajemy link gdy nie jestesmy na glownej stronie;
  if (isHomePage) {initMenu(); } // inicjacja menu
  initSlider(); // czy to na pewno nalezy zawsze wykonac?
 
});
/*global $*/
$(document).ready(function () {
	$("#maincontent").scroll(function() {
		100 < $(this).scrollTop() ? $("#scrollup").fadeIn() : $("#scrollup").fadeOut()
	}), $("#scrollup").click(function() {
		return $("#maincontent").animate({
			scrollTop: 0
		}, "fast"), !1
	})
}), $(document).ready(function () {
	$(".openToDiv").click(function(t) {
		t.preventDefault();
		var n = $(this).attr("href"),
			e = $(this).attr("title");
		$("#maincontent").load(n).animate({
			scrollTop: 0
		}, "800"), document.title = e
	})
}), $(document).ready(function () {
	$(".openToDiv").click(function(t) {
		t.preventDefault();
		var n = $(this).attr("href"),
			e = $(this).attr("title");
		$("#maincontent").load(n), $("html, body").animate({
			scrollTop: 0
		}, "800"), document.title = e
	})
});

Pozdrawiam Z

1

Wczytywanie ich jako async albo defer niezbyt pomaga, albo prawie wcale.

Po pierwsze dlaczego miałoby cokolwiek zmienić na plus? W przypadku powyższego raczej tylko pogorszy sytuację.
Po drugie dlaczego nie wrzucisz wszystkiego w:

window.addEventListener('load', { ... }

Tylko masz 1x onLoad i 3x document.ready ?

W tym momencie w ogóle nie masz kontroli nad tym co wczyta się pierwsze.

Dlaczego nie tak?


window.addEventListener('load', function (e) { // wykonac po zaladowaniu dokumentu;
 
// rozpoznaje glowna strona po tym, ze istnieje div o id-ku "maincontainer" albo id contentcolumn dla nowego ukladu;
  var isHomePage = document.getElementById('maincontent') ? true : false;
  // wczytaj dodatkowy CSS;
  var loadCss = function () {
    if (!document.getElementById('home-link-css')) {
        // tworzymy nowy element 'link', ktory dodajemy do head-a;
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id = 'home-link-css';
        link.rel = 'preload stylesheet';
        link.as = 'style';
        link.type = 'text/css';
        link.href = 'home-link.css';
        link.media = 'all';
        head.appendChild(link);
    }
  };
  // dodaje link prowadzacy do glownej strony
  var addHomeLink = function () {
    var homeLink = document.createElement("a"); // element;
    homeLink.innerHTML = "It's just a sub-page - go back to the menu page"; // tekst;
    homeLink.href = "http://mtkosciuszko.org.au/welcome-eng.php"; // URL do portalu;
    homeLink.title = "Back to the menu page";
    homeLink.classList.add("home-link"); // dodaj klase;
    var parent = document.getElementsByClassName('cala')[0];
    var firstChild = parent.firstChild;
    if (!firstChild) { return; }
    parent.insertBefore(homeLink, firstChild);
  }
  // aktywacja menu + wczytywanie stron do kontenera;
  var initMenu = function () {
 
    if (typeof $ == 'undefined') { return; } // bez jQuery nie kontynuujemy;
    var content = $('#maincontent'); // kontener dla tresci strony albo contentcolumn;
    var defaultTitle = document.title; // domyslny tytul strony;
      $('.openToDiv').on('click', function(event)) { // event typu 'onClick' dla elementow menu;
      event.preventDefault(); // ignorujemy domyslne zachowanie
      var item = $(this); // obiekt jQuery elementu;
      var url = item.attr('href'); // URL z elementu;
      var title = item.attr('title') || defaultTitle; // tytul
      if (!url) { return false; } // jezeli brak adresu to przerywam operacje;
      $.get(url, function(response) { // tutaj request za pomoca get-a;
        content
          .html(response) // wprowadz tresc do kontenera;
          .animate({scrollTop:0}); // kontener przewin do gory
        content.find('.home-link').remove();
        document.title = title; // ustaw tytul z elementu;
      });
    });
 
    // o ile klasa nie jest ostylowana to nie jest potrzebna;
    // (to tez zapobiega ponownemu nadaniu event-u przez nadmiarowe skrypty)
    $('.openToDiv').toggleClass('openToDiv');
  };
 
  if (!isHomePage) { addHomeLink(); loadCss(); } // dodajemy link gdy nie jestesmy na glownej stronie;
  if (isHomePage) {initMenu(); } // inicjacja menu
  initSlider(); // czy to na pewno nalezy zawsze wykonac?


  // część duga



	$("#maincontent").scroll(function() {
		100 < $(this).scrollTop() ? $("#scrollup").fadeIn() : $("#scrollup").fadeOut()
	}), $("#scrollup").click(function() {
		return $("#maincontent").animate({
			scrollTop: 0
		}, "fast"), !1
	})

	$(".openToDiv").click(function(t) {
		t.preventDefault();
		var n = $(this).attr("href"),
			e = $(this).attr("title");
		$("#maincontent").load(n).animate({
			scrollTop: 0
		}, "800"), document.title = e

	$(".openToDiv").click(function(t) {
		t.preventDefault();
		var n = $(this).attr("href"),
			e = $(this).attr("title");
		$("#maincontent").load(n), $("html, body").animate({
			scrollTop: 0
		}, "800"), document.title = e
	})






 
});

Potem masz:

    if (typeof $ == 'undefined') { return; } // bez jQuery nie kontynuujemy;

I co dalej? Kicha... Może jednak warto panować nad kolejnością wczytywania skryptów i nie mieć wątpliwości czy JQ jest czy go nie ma.

0
4w0rX4t4X napisał(a):

Wczytywanie ich jako async albo defer niezbyt pomaga, albo prawie wcale.

Po pierwsze dlaczego miałoby cokolwiek zmienić na plus? W przypadku powyższego raczej tylko pogorszy sytuację.
Po drugie dlaczego nie wrzucisz wszystkiego w:

window.addEventListener('load', { ... }

Tylko masz 1x onLoad i 3x document.ready ?

W tym momencie w ogóle nie masz kontroli nad tym co wczyta się pierwsze.

Dlaczego nie tak?


window.addEventListener('load', function (e) { // wykonac po zaladowaniu dokumentu;
 
// rozpoznaje glowna strona po tym, ze istnieje div o id-ku "maincontainer" albo id contentcolumn dla nowego ukladu;
  var isHomePage = document.getElementById('maincontent') ? true : false;
  // wczytaj dodatkowy CSS;
  var loadCss = function () {
    if (!document.getElementById('home-link-css')) {
        // tworzymy nowy element 'link', ktory dodajemy do head-a;
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id = 'home-link-css';
        link.rel = 'preload stylesheet';
        link.as = 'style';
        link.type = 'text/css';
        link.href = 'home-link.css';
        link.media = 'all';
        head.appendChild(link);
    }
  };
  // dodaje link prowadzacy do glownej strony
  var addHomeLink = function () {
    var homeLink = document.createElement("a"); // element;
    homeLink.innerHTML = "It's just a sub-page - go back to the menu page"; // tekst;
    homeLink.href = "http://mtkosciuszko.org.au/welcome-eng.php"; // URL do portalu;
    homeLink.title = "Back to the menu page";
    homeLink.classList.add("home-link"); // dodaj klase;
    var parent = document.getElementsByClassName('cala')[0];
    var firstChild = parent.firstChild;
    if (!firstChild) { return; }
    parent.insertBefore(homeLink, firstChild);
  }
  // aktywacja menu + wczytywanie stron do kontenera;
  var initMenu = function () {
 
    if (typeof $ == 'undefined') { return; } // bez jQuery nie kontynuujemy;
    var content = $('#maincontent'); // kontener dla tresci strony albo contentcolumn;
    var defaultTitle = document.title; // domyslny tytul strony;
      $('.openToDiv').on('click', function(event)) { // event typu 'onClick' dla elementow menu;
      event.preventDefault(); // ignorujemy domyslne zachowanie
      var item = $(this); // obiekt jQuery elementu;
      var url = item.attr('href'); // URL z elementu;
      var title = item.attr('title') || defaultTitle; // tytul
      if (!url) { return false; } // jezeli brak adresu to przerywam operacje;
      $.get(url, function(response) { // tutaj request za pomoca get-a;
        content
          .html(response) // wprowadz tresc do kontenera;
          .animate({scrollTop:0}); // kontener przewin do gory
        content.find('.home-link').remove();
        document.title = title; // ustaw tytul z elementu;
      });
    });
 
    // o ile klasa nie jest ostylowana to nie jest potrzebna;
    // (to tez zapobiega ponownemu nadaniu event-u przez nadmiarowe skrypty)
    $('.openToDiv').toggleClass('openToDiv');
  };
 
  if (!isHomePage) { addHomeLink(); loadCss(); } // dodajemy link gdy nie jestesmy na glownej stronie;
  if (isHomePage) {initMenu(); } // inicjacja menu
  initSlider(); // czy to na pewno nalezy zawsze wykonac?


  // część duga



	$("#maincontent").scroll(function() {
		100 < $(this).scrollTop() ? $("#scrollup").fadeIn() : $("#scrollup").fadeOut()
	}), $("#scrollup").click(function() {
		return $("#maincontent").animate({
			scrollTop: 0
		}, "fast"), !1
	})

	$(".openToDiv").click(function(t) {
		t.preventDefault();
		var n = $(this).attr("href"),
			e = $(this).attr("title");
		$("#maincontent").load(n).animate({
			scrollTop: 0
		}, "800"), document.title = e

	$(".openToDiv").click(function(t) {
		t.preventDefault();
		var n = $(this).attr("href"),
			e = $(this).attr("title");
		$("#maincontent").load(n), $("html, body").animate({
			scrollTop: 0
		}, "800"), document.title = e
	})






 
});

Potem masz:

    if (typeof $ == 'undefined') { return; } // bez jQuery nie kontynuujemy;

I co dalej? Kicha... Może jednak warto panować nad kolejnością wczytywania skryptów i nie mieć wątpliwości czy JQ jest czy go nie ma.

Rozumie że:

  1. Mam w jeden skrypt wrzucić to co napisałeś
  2. JQ jest czy go nie ma. - oczywiście że jest na sanym dole całej strony, chociaż chyba z tego co zaobserwowałem lepiej ? jak jest "preload" na dole head
0
Zdz h. Leliwa napisał(a):

Rozumie że:

  1. Mam w jeden skrypt wrzucić to co napisałeś
  2. JQ jest czy go nie ma. - oczywiście że jest na sanym dole całej strony, chociaż chyba z tego co zaobserwowałem lepiej ? jak jest "preload" na dole head

Źle rozumiesz.
Poczytaj sobie o tym jakie zdarzenia związane z wczytywaniem strony są wywoływane w przeglądarce dla obiektów window i document.
Kolejność ich wykonywania jest ściśle określona w dokumentacji i nie ma tu potrzeby zdawać się na przypadek.

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

Potem poczytaj w jakiej kolejności w dokumencie wczytywane są skrypty JS i kiedy są uruchamiane.
Kiedy są wczytywana i uruchamiane dokumenty dołączone przez <script src...="src..."> a kiedy te osadzone wprost w dokumencie między tagami <script>

Dopiero wiedząc jak działa powyższe zacznij czytaćo load, preload i defer.

Tu nie ma żadnej magii. Nie ma tym bardziej żadnego "lepiej na końcu ładować z defer" - to jakieś bzdury na kołach.
Strona ma być zaplanowana tak aby było dobrze i pod kontrolą a nie 'lepiej (...) jak jest "preload" na dole head`.

Programowanie rzecz ścisła dlatego programowanie przez zgadywanie nie przyniesie dobrych efektów.

0
4w0rX4t4X napisał(a):
Zdz h. Leliwa napisał(a):

Rozumie że:

  1. Mam w jeden skrypt wrzucić to co napisałeś
  2. JQ jest czy go nie ma. - oczywiście że jest na sanym dole całej strony, chociaż chyba z tego co zaobserwowałem lepiej ? jak jest "preload" na dole head

Źle rozumiesz.
Poczytaj sobie o tym jakie zdarzenia związane z wczytywaniem strony są wywoływane w przeglądarce dla obiektów window i document.
Kolejność ich wykonywania jest ściśle określona w dokumentacji i nie ma tu potrzeby zdawać się na przypadek.

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

Potem poczytaj w jakiej kolejności w dokumencie wczytywane są skrypty JS i kiedy są uruchamiane.
Kiedy są wczytywana i uruchamiane dokumenty dołączone przez <script src...="src..."> a kiedy te osadzone wprost w dokumencie między tagami <script>

Dopiero wiedząc jak działa powyższe zacznij czytaćo load, preload i defer.

Tu nie ma żadnej magii. Nie ma tym bardziej żadnego "lepiej na końcu ładować z defer" - to jakieś bzdury na kołach.
Strona ma być zaplanowana tak aby było dobrze i pod kontrolą a nie 'lepiej (...) jak jest "preload" na dole head`.

Programowanie rzecz ścisła dlatego programowanie przez zgadywanie nie przyniesie dobrych efektów.

Jak zapewne przeczytałeś (bo za bardzo nie chcę ujawniać całości ) opanowanie czegoś mając niecoś ponad 1/2 wieku sprawia że z reguły jest cośkolwiek trudne, więc czy mogę liczyć na zapodanie właściwego rozwiązania?

1

Jaki efekt wizualny (albo w zachowaniu strony) chcesz dokładnie osiągnąć?

Być może dałoby to się to napisać w prostszy sposób. Bo tak to grzebanie w bagnie trochę.

0
LukeJL napisał(a):

Jaki efekt wizualny (albo w zachowaniu strony) chcesz dokładnie osiągnąć?

Być może dałoby to się to napisać w prostszy sposób. Bo tak to grzebanie w bagnie trochę.

Dziękuję za zainteresowanie LukeJL,
Tak pokrótce
Na górze posta są dwa skrypty ten dłuższy służyć ma do wczytywania kompletnej strony html do maincontent czyli już istniejącego okna (luknij na link ) z jednoczesnym przesuwaniem do góry przy wczytywaniu innych stron. Poza tym "obsługuje" wyświetlanie" komunikatu o podstronie, i ewentualnym wyświetlaniem strzałki "na górę" -zarówno w wersji desktop jak i mobile.
Ale bez tego drugiego w wersji mobile wczytywanie nie działa.
Witrynę "piszę " z Polski będąc tam oficjalnym sympatykiem Mt Kosciuszko Inc.Niestety znajomość ,.js jest prawie poniżej zera

1

Zauważyłem bugi oraz niedogodności:

  1. czasem przewijanie nie działa poprawnie, przewijam w dół i strona się cofa
  2. jak najeżdżam myszą na to menu, to wystarczy, że zjadę myszą z menu i się chowa. To bardzo wkurzające. Ja bym zrobił to menu bardziej statyczne.
  3. jak się klika w kolejne podstrony, to nie zmienia się adres na górze, więc w rezultacie nie da się kliknąć podstrony, a potem komuś wysłać linka, bo przechodzi do strony głównej (można by to rozwiązać podmieniając location.hash przy wczytywaniu podstrony, natomiast przy pierwszym załadowaniu strony patrzeć na location.hash i automatycznie wczytać podstronę)

A tak ogólnie, to strona jest pisana w starym stylu, teraz się już tak nie robi stron, tym niemniej jest tam jakaś konkretna treść, więc może komuś posłużyć. Jednak mam wrażenie, że próbujesz na siłę dodać do tej strony rzeczy, które wydają się fajne, ale niekoniecznie są dobrym pomysłem.

ewentualnym wyświetlaniem strzałki "na górę" -zarówno w wersji desktop jak i mobile.

Po co wyświetlać strzałkę w górę? To czasem może mieć sens, ale nie widzę tutaj sensu. Ktoś zechce przewinąć, ma w przeglądarce paski przewijania.

Ja bym to wywalił:

.animate({scrollTop:0}); // kontener przewin do gory

Oraz pousuwałbym animacje scrollowania w innych miejscach (jakby to jeszcze działało prawidłowo, ale jak ma tylko generować bugi, to po co).
Ogólnie zostawiłbym tylko to, co faktycznie potrzebne.

0
LukeJL napisał(a):

Zauważyłem bugi oraz niedogodności:

  1. czasem przewijanie nie działa poprawnie, przewijam w dół i strona się cofa
  2. jak najeżdżam myszą na to menu, to wystarczy, że zjadę myszą z menu i się chowa. To bardzo wkurzające. Ja bym zrobił to menu bardziej statyczne.
  3. jak się klika w kolejne podstrony, to nie zmienia się adres na górze, więc w rezultacie nie da się kliknąć podstrony, a potem komuś wysłać linka, bo przechodzi do strony głównej (można by to rozwiązać podmieniając location.hash przy wczytywaniu podstrony, natomiast przy pierwszym załadowaniu strony patrzeć na location.hash i automatycznie wczytać podstronę)

A tak ogólnie, to strona jest pisana w starym stylu, teraz się już tak nie robi stron, tym niemniej jest tam jakaś konkretna treść, więc może komuś posłużyć. Jednak mam wrażenie, że próbujesz na siłę dodać do tej strony rzeczy, które wydają się fajne, ale niekoniecznie są dobrym pomysłem.

ewentualnym wyświetlaniem strzałki "na górę" -zarówno w wersji desktop jak i mobile.

Po co wyświetlać strzałkę w górę? To czasem może mieć sens, ale nie widzę tutaj sensu. Ktoś zechce przewinąć, ma w przeglądarce paski przewijania.

Ja bym to wywalił:

.animate({scrollTop:0}); // kontener przewin do gory

Oraz pousuwałbym animacje scrollowania w innych miejscach (jakby to jeszcze działało prawidłowo, ale jak ma tylko generować bugi, to po co).
Ogólnie zostawiłbym tylko to, co faktycznie potrzebne.

Zdziwiłem się tak szybką odpowiedzią LukeJL - dziękuję za uwagi
A więc;) ad rem:
Do p. 1 - to jest właśnie ten byk ze skryptami ;
Do p. 2 - w skrypcie menu można ustawić ten czas - teraz jest 200 delay in milliseconds before entire menu disappears onmouseout;
Do p. 3 - "można by to rozwiązać podmieniając location.hash...... itd " wiem o tym ALE trza ;) by chyba na nowo napisać skrypt wczytywania - a to przerasta moje siły. Chciałbym znaleźć kogoś kto by to opanował nawet z jakąś logiczną $$
Co do wywaleń spróbuję zobaczę jak to wypadnie.
Strona jak widziałeś chyba - stoi już ponad 10 lat.
Jak będę miał jakoweś problemy to zapukam.
pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1