Avatar billede Slettet bruger
02. juli 2012 - 10:23 Der er 9 kommentarer og
1 løsning

Sen load af indhold på hjemmeside

Hejsa

har søgt lidt på ovenstående, men synes ikke eksemplerne jeg finder fungerer kønt.
Til en side, med vertikal scroll, og med billeder, eks.v.:


<div class="contain">
  <div class="text">aefsefes</div>
  <div class="image"><img></div>
</div>
  <div class="divider"></div>

<div class="contain">
  <div class="text">aefsefes</div>
  <div class="image"><img></div>
</div>
  <div class="divider"></div>


Etc.

For ikke at belaste besøgende vil det være smart med en slags "delayed load" på enten billeder, eller evt på hele div'en "contain". -Således at det loader som man scroller nedad.

Siden er pt holdt i ren html og er simpel. Er der nogen der har viden om, eller et bud på en rimelig nem og pæn løsning?

Tak på forhånd!
Avatar billede magic-mouse Novice
02. juli 2012 - 17:29 #1
Du kan hente billederne ved hjælp af XHR.

Lav et generelt script selv eller kig på jQuerys bibliotek.
Avatar billede Slettet bruger
02. juli 2012 - 18:41 #2
Det er jeg nødt til at søge lidt på. Mit kendskab rækker ikke meget længere end html/css. Kommer vel ikke uden om jQuery her. XHR har jeg aldrig hørt om. Fungerer det i alle browsere..?
Avatar billede magic-mouse Novice
02. juli 2012 - 22:11 #3
XHR er den api som browserne anvender for at lave Ajax kald.

Wikipedias forklaring: http://en.wikipedia.org/wiki/XMLHttpRequest og w3schools http://www.w3schools.com/xml/xml_http.asp er et og starte. Men er du ikke frisk på at lave den selv findes der biblioteker til jQuery.
Avatar billede Slettet bruger
03. juli 2012 - 12:12 #4
OK takker. Jeg har fundet en jQuery tutorial. Tror at jQuery er "nemmest". Masse dokumentation.  Har nu blot lidt problemer med at paste de enkelte stykker koder ind for at aktivere det...
Avatar billede Slettet bruger
03. juli 2012 - 12:15 #5
Vil have givet dig point, men ved ikke hvordan... Men tak for input.
Avatar billede magic-mouse Novice
03. juli 2012 - 12:23 #6
Ellers må du lige sige til... så finder vi en løsning på det også.

For at give points til en beder du om at de lægger et svar, så kan du give points til det.
Avatar billede Slettet bruger
03. juli 2012 - 14:00 #7
Ja... Nu har jeg forsøgt siden i aftes uden held.

Har importeret jquery.js og relevant plugin jquery.lazyload.js, lokalt.

Og, tilføjet, i bunden af html dokumentet (inden </body>):

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
      $("img.lazy").lazyload({
  data_attribute  : "kitten"
});
  </script>


Nu er jeg jo helt ny i det. Og den tut jeg fandt er ikke specielt pædagogisk. Det er garanteret simpelt når man ved det :)

Skal man gøre andet, helt generelt. Altså skal der flere informationer ind i html'en i headeren, eller lign.?

Link til tut: http://www.appelsiini.net/projects/lazyload
Avatar billede Slettet bruger
03. juli 2012 - 14:05 #8
...har selvfølgelig tilføjet class til img etc. som beskrevet man skal. Det var html, det forstår jeg :) Resten uddyber han ikke helt hvor man skal paste ind.

Eks.v.: "then in your code do: $("img.lazy").lazyload();"

-I hvilken kode? I plugin'et, eller html'en...
Avatar billede magic-mouse Novice
05. juli 2012 - 15:57 #9
<script type="text/javascript" charset="utf-8">
$(function(){
      $("img.lazy").lazyload({
  data_attribute  : "kitten"
});
};
  </script>


Prøv med den kode der... Hvis den ikke virker må jeg lige kigge nærmere på den... Har du et sammenhæg ?
Avatar billede Slettet bruger
05. juli 2012 - 16:09 #10
Tak. Oprettede et nyt indlæg og det virkede: http://www.eksperten.dk/spm/965583

Men tak for kommentar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester