Avatar billede Slettet bruger
26. oktober 2012 - 14:02 Der er 24 kommentarer og
1 løsning

Lazy load jquery

Hej,

sider med et website, hvor oversigt over portfolie/billeder vises på én af siderne.

Bygger op i et grid; bruger så lazy load på hvert billede, som hvert eks.v. er 300 x 200 px.
Men de loader jo alle på én gang - ergo tænker jeg pointen går lidt af fløjten :)
Sprøgsmålet er så: hvordan løser jeg den. -Evt. ved at loade dem enkeltvis ét ad gangen? -Og hvordan?

(Har brugt følgende tut.: http://www.appelsiini.net/projects/lazyload)


Mange tak på forhånd!

Vh Michael
Avatar billede Slettet bruger
26. oktober 2012 - 14:05 #1
Eks.:

<div class"Container">
      <div class="column Grid_3 "> <img class="lazy" src="images/lazyPix.gif" data-kitten="images/x.gif">
      </div>
      <div class="column Grid_3 "> <img class="lazy" src="images/lazyPix.gif" data-kitten="images/x.gif">
      </div>
      <div class="column Grid_3 "> <img class="lazy" src="images/lazyPix.gif" data-kitten="images/x.gif">
      </div>
    </div>

[... og igen]


Og i bunden, følgende kode:

<script type="text/javascript">
      $(window).load(function () {
          $("img.lazy").show().lazyload()
      });
  </script>
Avatar billede softspot Forsker
26. oktober 2012 - 14:14 #2
Hvilken effekt ønsker du at opnå (dvs. hvad forventer du helt præcis der skal ske)?
Avatar billede softspot Forsker
26. oktober 2012 - 14:16 #3
Bemærkede du i øvrigt noten i toppen af den side du henviser til?
Avatar billede Slettet bruger
26. oktober 2012 - 14:29 #4
Hej.

Undskyld er lidt en newbie her, så det ligner stadig lidt Kinesisk for mig. Bruger godt <noscript>, men ikke data-original. Det ser jeg lige på.

Idéen er, selvfølgelig, ikke at belaste folks browser når de klikker ind på denne oversigt.
Så lazy load i brug - men når der er +12 billeder får specielt Firefox og Chrome besvær da de prøver at loade alle billeder på én og samme gang. Browseren fryser et øjeblik.

-Så tanken var om ikke jeg kunne få den til at loade i mindre bidder, evt hvert billede i kø for at undgå frysning.

Måske er det bare mig :/
Avatar billede softspot Forsker
26. oktober 2012 - 14:37 #5
Det lyder også rimeligt nok, men mon ikke de nævnte browsere så falder ind under de i noten nævnt (og hvor HTML derfor skal implementeres anderledes)...?

<img data-original="img/example.jpg" src="img/grey.gif">
Avatar billede Slettet bruger
26. oktober 2012 - 15:00 #6
Hm jaeh. Måske, har opdateret det hele, også source koden.

Havde tilsyneladende v. 1.7.1 (http://www.appelsiini.net).

-Ser ud til at fryse lidt mindre, umiddelbart. Ser dog ud til at loade hele viften i ét hug.

Du får point for hjælp alligevel, vender tilbage hvis der opstår problemer :)

Tak. God weekend!
Avatar billede Slettet bruger
26. oktober 2012 - 15:03 #7
Lukket
Avatar billede softspot Forsker
26. oktober 2012 - 15:05 #8
Tak i lige måde :-)
Avatar billede Slettet bruger
26. oktober 2012 - 15:05 #9
Okay, for det første, hvorfor kan man ikke slette..?

Anyway, hvis du smider en svar, softspot, så får du lige point :)
Avatar billede softspot Forsker
26. oktober 2012 - 15:06 #10
Har du prøve at tømme din cache og lure i din browsers udviklerværktøjer (under netværkstrafik) for at se om billederne hentes fra cache eller om de læses fra serveren...?
Avatar billede Slettet bruger
26. oktober 2012 - 15:13 #11
Yes, gør jeg hver gang :) Men godt bud. Når det er med gammel cache, ser det udemærket ud. Men ryddet, fryser den lige et splitsekund; og loader så ni billeder i ét hug.
Avatar billede olebole Juniormester
26. oktober 2012 - 15:54 #12
<ole>

"Ser dog ud til at loade hele viften i ét hug." >> Det kunne tyde på, JavaScript ikke kan aflæse, hvor høj viewporten er - og dermed hvilke billeder, der skal loades og hvornår. En forklaring kunne måske være, at du har disabled CSS.

Hvilke(n) browser(e) tester du i? Hvad skriver du allerøverst i dit HTML-dokument?

/mvh
</bole>
Avatar billede Slettet bruger
26. oktober 2012 - 16:17 #13
Bruger FF, Safari og Chrome.
Hvis CSS ikke var vedhæftet, ville det vel rode rundt. Eller misforstår jeg?


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>


Takker.
Avatar billede olebole Juniormester
26. oktober 2012 - 16:27 #14
Allerøverst. Hvad er den første linje i dit dokument?
Avatar billede Slettet bruger
26. oktober 2012 - 16:32 #15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede olebole Juniormester
26. oktober 2012 - 16:40 #16
Så var det heller ikke det. En manglende eller ufuldstændig DTD disabler store dele af CSS i IE. At du ikke tester i IE og Opera er i øvrigt en stor fejl. IE er immervæk WWW's mest udbredte browser ... den kan man ikke bare blæse på.

Kan du lægge et link til siden, så vi har mulighed for at finde fejlen? Har du i øvrigt tjekket, om scriptet smider JS-fejl?
Avatar billede Slettet bruger
26. oktober 2012 - 17:00 #17
Det er mit eget site så tillader mig at boykotte IE i dette tilfælde. IE er et problembarn imo. Ellers giver jeg dig ret ifht kunder.

Den er ikke online, desværre. Det må blive næste gang.

JS ser fint ud. Måske er det som det skal være, men bare ikke ment til at lave grid design med mange billeder, men mere ment til store enkelte billeder.
Avatar billede olebole Juniormester
26. oktober 2012 - 17:15 #18
Hvis det er et lokalt site, kan du tillade dig, hvad du vil. På vores fælles WWW har du samme forpligtelser som på vores fælles fortorv. Dér kan man ikke 'smide hvad som helst'. Derudover er IE ikke det store problembarn - men den afslører en masse 'problembørn'  *o)

Nej, det er ikke, som det skal være. Sådan som det (ikke) virker nu, er det spild at bytes at downloade dine scripts. Det var vel i udgangspunktet netop spildt datadownload, scriptet skulle undgå  =)
Avatar billede Slettet bruger
26. oktober 2012 - 17:24 #19
Haha.

Ja okay. Bryder mig bare ikke om cyklister på fortovet. ;P

Nemlig. Det er netop det. Men scriptet fortæller jo også at browseren skal vise alle billeder indenfor syn. Scroller du, loader de løbene. Så det er jo fint. Men grunden til at jeg postede her, var netop at høre om løsninger, idéer, eller om det i virkeligheden er fint (har set mange sider agere ligeledes - og nej, det betyder ikke at det er rigtigt. Ligesom flertallets brug af IE.)

Go weekend! :)
Avatar billede Slettet bruger
26. oktober 2012 - 17:39 #20
Er nødt til lige at tilføje hvis ikke det er klart. Er naturligvis ironisk.

Man skal vise hensyn til alle enheder såvidt muligt. Min side bliver eks.v. af samme grund responsive. Og tak forøvrigt!
Avatar billede olebole Juniormester
26. oktober 2012 - 17:58 #21
Responsive design er absolut ikke nødvendigvis godt design. Noget af det mest ulæselige er således Wikipedia - som er hyper responsive. Ofte er versionering på baggrund af klienttype langt bedre for brugeren  =)

Folk må bruge, den browser, de lyster, men jeg vælger nu primært at bruge den sikreste browser på markedet - og den, som har stået for langt de fleste nyskabelser, som vi ikke kan undvære i dag. Jeg nævner i flæng: CSS, XML, XMLHttpRequest (grundlaget for Ajax) samt mængder af andre features.

At den slags holdninger så ikke giver særlig stor 'street-creed' på Arto, tager jeg med stoisk ro  *D
Avatar billede Slettet bruger
26. oktober 2012 - 18:11 #22
Hehe...

Refererede ikke til design, men brugervenlighed og det at vise hensyn.
Tror bare jeg lader den ligge for det er ved at blive mærkeligt nu.

Jeg vil lade være med at ytre min mening om noget jeg _tilsyneladende_ ikke ved noget om.

Mht, design, min Arto-modne-ven; det ved jeg til gengæld lidt om. Alene udfra dit ikon; *host*... Så lad du ytringer derom ligge til en pro :)
Avatar billede olebole Juniormester
26. oktober 2012 - 18:38 #23
*LoL* Du bedømmer min designkunnen på en avatar, jeg ikke selv har lavet, men kastet på i en snæver vending. Ellers havde bla. spatiering set helt anderledes ud. På samme måde bedømmer jeg måske dig en anelse for ung udfra dine udtalelser. Vi vurderer 'da andre' på de informationer, vi har tilgængelige. Sådan er det jo.  =)

Selvom min første egentlige uddannelse på området var på Space Invaders - der på det tidspunkt regnedes blandt førende multimediedesign uddannelser i Europa - har du dog fuldstændig ret i, at jeg sætter budskabet over dets udklædning.

Min avatar udtrykker et ekstremt vigtigt og skræmmende overset budskab. Lyt til, hvad han siger - og blæs så på, du ikke 'kan lide hans frisure'  *o)

Måske, du skulle slå ordet 'pro' op - eller måske øve dig lidt mere i at gætte  *D
Avatar billede Slettet bruger
26. oktober 2012 - 18:53 #24
"LoL" ? "Arto"? "Space Invaders"? Jaeh... Det er vist der de gamle mænd hører hjemme :)

Smut du tilbage til det der moderne Facebook og bully nogle flere der. Du har tydeligvis øvelsen og sindet.

Jeg prøver igen, barnlig som jeg er, god weekend og tak!
Avatar billede olebole Juniormester
26. oktober 2012 - 20:11 #25
Sålænge der også er seriøse og voksne brugere på Eksperten, agter jeg at blive. I øvrigt er Space Invaders nedlagt, så dér hører ingen længere hjemme. Arto troede jeg faktisk mest var for pubertetsunger - men jeg må jo lytte til en ekspert  =)

Ja, det gør du jo - og det er du så ganske afgjort - men i lige måde og selvtak  =)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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