JavaScript Inhalt automatisch nachladen

DjangOC · 15. Mai 2017

Hi miteinander

Auf Basis von dieser Anleitung bei Kulturbanause habe ich es nun hinbekommen, dass der allererste Inhalt innerhalb von Sekundenbruchteilen angezeigt wird. (4.4KB HTML, 3KB CSS und noch total (mit Shariff) 90KB andere CSS Files)
Nun möchte ich es aber so handhaben, dass der Inhalt welcher in der source Datei steckt nicht erst nach klick geladen und angezeigt wird, sondern geladen wird, während der primäre Index Inhalt (habe die AJAX Datei in Index umbenannt) angezeigt wird.

Das müsste ja auch gehen, oder? Habs eigenständig mit timeout Funktion getestet, hat aber nicht funktioniert. Nun wenn ich schon bitte, hat vielleicht jemand eine Lösung, welche den anderen Inhalt erst anzeigt, wenn der ganze Source Inhalt und eingebundene Bilder etc. geladen ist, aber frühstens nach z.B. 3 Sekunden?

Danke schonmal im Vornherein.

Grüsse DjangOC

majusss · 15. Mai 2017

Bitte ordne nochmal deine Gedanken und versehe deine Fragen mit Zahlen. Diesen Textbrei versteht kein Mensch mehr.

Und vorallem suche so etwas nicht auf deutsch...
Hier einlesen: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Ich glaube du suchst was coolmodi gepostet hat, aber das solltest du auch selbst gefunden haben o.O

coolmodi · 15. Mai 2017

jQuery:

HTML:

$(window).load(function() {
    // called nachdem die Seite inklusive Bilder komplett geladen ist
});

Ohne jQuery:

HTML:

window.onload = function() {

};

DjangOC · 15. Mai 2017

majusss schrieb:
Bitte ordne nochmal deine Gedanken und versehe deine Fragen mit Zahlen. Diesen Textbrei versteht kein Mensch mehr.

Und vorallem suche so etwas nicht auf deutsch...
Hier einlesen: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Naja, meine Suche war zuerst bei StackOverflow, aber das was ich da so fand, was einigermassen aktuell schien, hat nicht wirklich gefunzt. Deswegen habe ich das dann von Kulturbanause genommen. Guck mir das verlinkte aber gleich mal an.

Teisi · 16. Mai 2017

OT: na hast dir mein PN nicht durchgelesen?

Oder wo ist das Problem? Bzw was genau willst du machen? Wie @majusss schon schrieb, solltest du deine Fragestellungen etwas verändern - bzw. genauer schreiben was du machst und was du machen willst.

DjangOC · 16. Mai 2017

Teisi schrieb:
OT: na hast dir mein PN nicht durchgelesen?

Oder wo ist das Problem? Bzw was genau willst du machen? Wie @majusss schon schrieb, solltest du deine Fragestellungen etwas verändern - bzw. genauer schreiben was du machst und was du machen willst.

Doch, zweimal sogar schon, aber noch nicht wirklich ganz kapiert. Also das wegen vanilla und jQuery leuchtet mir ein - muss ich aber im Moment einfacvh so handhaben, dass ich das verwende, wo die Vorlagen meine Bedürfnisse am ehesten abdecken., aber am anderen hab ich noch zu nagen.

Ich hab das nun so weit, aber eben dass ist nicht das, was ich anstrebe.

HTML:

<!doctype html>
...........
        <p>
          <button onclick="kb_source_2_target()">Hier klicken</button>
        </p>
        <script src="jquery.js" type="text/javascript"></script> 
        <script>
        	function kb_source_2_target() {
        		$.get('source.php', function(data) {
        			$('#target').html(data);	
        		})
        	}
        </script>
...........

kling1 · 16. Mai 2017

coolmodi hats doch schon gepostet

mit jquery so

Code:

$(document).ready(() => {
  $.get('source.php', data => {
    $('#target').html(data)
  })
})

vanilla js

Code:

document.addEventListener('DOMContentLoaded', () => {
  fetch('source.php').then(response => {
      return response.text()
  }).then(data => {
      document.querySelector('#target').html = data
  })
})

DjangOC · 16. Mai 2017

kling1 schrieb:

coolmodi hats doch schon gepostet

mit jquery so

Code:

$(document).ready(() => {
  $.get('source.php', data => {
    $('#target').html(data)
  })
})

vanilla js

Code:

document.addEventListener('DOMContentLoaded', () => {
  fetch('source.php').then(response => {
      return response.text()
  }).then(data => {
      document.querySelector('#target').html = data
  })
})

Wenn ich das so mache, lädt es die im Source eingebundenen Bilder nicht zuerst fertig, sondern zeigt sie halbfertig geladen an. Also ned so dass was gewünscht ist.
Und kann ich das alles in eine Funktion verschachteln, welche die minimale zeit vorschreibt, welche zu verstreichen hat?

coolmodi · 16. Mai 2017

Du musst auch load nehmen wenn Bilder auf der eigentlichen Seite erst fertig geladen werden sollen bevor der code ausgeführt wird, wie ich es schon geschrieben habe, ready kommt schon vor Bildern.

Und die Bilder in der nachgeladenen Datei (source) werden natürlich ganz normal geladen. Wenn du willst, dass Bilder allgemein erst angezeigt werden, nachdem sie vollständig sind, dann musst du das per JS managen. Also in nem unsichtbaren Element laden und dann sichtbar machen wenns fertig ist (geht auch mit dem load event). Warum man das machen sollte weiß ich nicht, gleiches gilt für ne künstliche Wartezeit.

Edit: Und du solltest echt mal deine Fragen so formulieren, dass man versteht was du willst. Geht es nun um die Bilder in der Startseite(index?) oder um welche im nachgeladenen(source?) code? In letzterem Fall würde dir auch eine Wartezeit nichts bringen, bzw. ist das in jedem Fall dämlich.

- Wenn Bilder auf Startseite fertig sein sollen bevor ajax ausgeführt wird -> ajax code nach window load event
- Wenn Bilder erst angezeit werden sollen nachdem sie fertig geladen sind -> nach jeweiligem load event vom bild sichtbar machen

ayngush · 16. Mai 2017

Wird hier nicht eher so etwas wie "Lazy Load" gesucht?
Diese unsägliche Optimierungstechnik, die größere Inhalte erst dann lädt, wenn sie für den Viewport relevant werden und damit auch gut gemeinte Cache-Technologien verhindert?

Teisi · 16. Mai 2017

@ayngush
Kommt darauf an, welche Cache-Technologien meinst du denn? Schließlich kannst du bei ajax auch angeben, das der Browser das cachen soll.

coolmodi · 17. Mai 2017

Zwar OT, aber das cacheverhalten sollte doch im cache-control header der Bilder (durch den webserver) definiert sein. Wie und wann die angefordert werden spielt dabei keine Rolle.

Kanibal · 17. Mai 2017

Man sollte noch erwähnen, dass die Arrow-Function ohne Transpiler nicht im IE funktioniert.

Der Zusatznutzen ist an der Stelle auch begrenzt; eine "normale" anonyme Funktion tut's auch :-)

DjangOC · 17. Mai 2017

Leuts, jetzt verstehe ich nur noch Bahnhof :/

Ich habe heute ein tolles Tutorial gefunden, welches sehr vielversprechend aussieht, leider extremst gross, probier ich mal am WE aus.

Teisi · 17. Mai 2017

Er meint das der Knopf im Browser "Pfeil nach rechts bzw. nach links" (in chrome ist er z. B. ganz oben rechts), nicht funktioniert wenn du ajax verwendest.
Das müsstest du berücksichtigen, bzw. speziell behandeln, damit er wieder funktioniert.

coolmodi · 17. Mai 2017

Aber das sollte man heute einfach mit der html5 history API lösen können, denn nur bei update unwilligen die noch auf IE9 und älter setzen geht das nicht. Also Leute die noch immer XP nutzen und nicht dann nicht mal Updates machen

DjangOC · 17. Mai 2017

Teisi schrieb:
Er meint das der Knopf im Browser "Pfeil nach rechts bzw. nach links" (in chrome ist er z. B. ganz oben rechts), nicht funktioniert wenn du ajax verwendest.
Das müsstest du berücksichtigen, bzw. speziell behandeln, damit er wieder funktioniert.

Also so wie es im Moment noch ist, steht ja Url/index.php#[und dann der entsprechende Bereich] und dass hat im Chrome mit von #2 zurück zu #1 gefunzt.

Teisi · 17. Mai 2017

Ja aber das soll ja weg, ist ja nicht schön...

Kanibal · 18. Mai 2017

Ah, mist. Sorry, ich wollte Dich nicht verwirren.
Gemeint war, dass die oben geposteten Code-Schnipsel Features (sog. Arrow-Functions) von Javascript verwenden, die erst in "Version" ES6 verwendbar sind. Der Internet Explorer beherrscht diese Version nicht, sodass der Code darin nicht funktionieren wird.

Wenn Dir der IE zunächst egal ist, hast Du keine Probleme. Die "Profis" verwenden in der Praxis dafür sog. Transpiler, die die "modernen" Features von ES6 auf ältere Sprachversionen übersetzen.

DjangOC · 18. Mai 2017

ah, danke für den Input.

Aber orientiert an der Verbreitung und der Optionen des stylings mit CSS fokusiere ich mich primär auf Chrome, und Firefox (wo man komischerweise scrollbars nicht stylen kann - könnte heulen.)
Da Edge ja aber nun doch auch weit verbreitet ist, schenkte ich dem IE gar keine Aufmerksamkeit, klar ist gegen dass POLS aber wer bitte hat das formuliert? Ich mein dass konnte man doch noch beachten, als es nur Netscape und MS gab, aber heute wo jeder Software Konzern meint seinen eigenen Browser bauen zu müssen geht das doch gar nicht mehr.

JavaScript Inhalt automatisch nachladen

Lt. Commander

Vice Admiral

Lt. Commander

Lt. Commander

Lt. Junior Grade

Lt. Commander

kling1

Gast

Lt. Commander

Lt. Commander

Commander

Lt. Junior Grade

Lt. Commander

Lt. Commander

Lt. Commander

Lt. Junior Grade

Lt. Commander

Lt. Commander

Lt. Junior Grade

Lt. Commander

Lt. Commander

Ähnliche Themen