Avatar billede KurtG Forsker
10. juli 2021 - 21:56 Der er 8 kommentarer og
1 løsning

Load file ved onmouseover

Jeg har en hjemmeside, hvor der listes filnavnet på en masse små billeder af sedler. Samtidig bliver billederne hentet,men vises først når cursor er over "Vis seddel".
I øjeblikket bruger jeg følgende:

if (file_exists($filename))
{
    echo "<div class='popupA'>";
    echo "<u><a>Vis seddel<span>";
    echo '<img border="0" src="Sedler/'.$pKasse.'/'.$pKasse.'-'.$pNr.'.jpg " height=450">';
    echo '<br>Seddel '.$pKasse.'-'.$pNr.'</span></u></a></div>';
}

Men det indebærer at alle billeder hentes fra begyndelsen, og da der kan være flere end 4.500 billeder, kan det tage ret lang tid.

Kan man ikke lave det sådan, at filerne først hentes, når musen er over "Vis seddel", f.eks. vha java (som jeg ikke har lært)?
Avatar billede arne_v Ekspert
11. juli 2021 - 01:08 #1
Det må du kunen lave i JavaScript.

Et alternativ som er set en del steder er at du kun loader den øverste del af listen og så loader du dynamisk efterhånden som der scrolles ned. Det er også JavaScript.
Avatar billede olsensweb.dk Ekspert
11. juli 2021 - 01:20 #2
>Men det indebærer at alle billeder hentes fra begyndelsen
hvad med at vise billederne som thumpnail, og ved mouseover vise det fulde billed vha AJAX

så du har alle billeder liggende i 2 størrelser / opløsninger, et som thumpnail, og et i fuld størrelse


>f.eks. vha java (som jeg ikke har lært)?
du mener vel javascript?? (java og javascript er 2 forskellige sprog)

https://www.w3schools.com/js/js_ajax_intro.asp
https://www.w3schools.com/jquery/jquery_ref_ajax.asp
Avatar billede KurtG Forsker
11. juli 2021 - 09:02 #3
Tak for forslagene.
Ja, jeg mente Javascript.
Ajax har jeg hørt om, men kender ikke andet end navnet.
Så det ser ud til, at det er måden frem at lære Javascript.
Og her ville jeg gerne have en genvej, nemlig at nogen har et forslag til kode, så jeg ikke skal lære det helt fra bunden (selv om det er det rigtigste)!
Avatar billede keysersoze Guru
12. juli 2021 - 15:15 #4
Hvis det kun er billederne du vil loade når der er behov for det så findes der faktisk en lazy-attribut men den er bare ikke super godt understøttet (https://caniuse.com/loading-lazy-attr) - alternativet til det kunne fx være https://github.com/aFarkas/lazysizes
Avatar billede KurtG Forsker
13. juli 2021 - 09:32 #5
Jeg har kikket på de pågældende links og må sige, at jeg ikke rigtig aner, hvordan jeg skal bruge det!
Avatar billede keysersoze Guru
13. juli 2021 - 20:16 #6
Hvor går du i stå i den ellers meget fine How To på lazysizes?
Avatar billede Henrik Hansen Forsker
25. juli 2021 - 21:23 #7
Ved hjælp af CSS og lidt JavaScript kan du loade billederne, når du kører cursor henover linket - ikke før. Billederne (noterne) bliver vist som et baggrunds-billede i et lille ”preview” ved hver link. URL til billederne indsættes i data-image attributten.
I CSS-delen kan du selv bestemme størrelsen på "preview".

Mit eksempel kræver dog, at du ændrer lidt i din PHP-kode, så hvert link ser ud som i min kode (har vedlagt php-koden nederst)

<style>
/* Indsæt på siden, eller i dit eksterne CSS-dokument */
.popupA {
    display: inline-block;
    position: relative;
    text-decoration: underline;
    cursor: pointer;
}
.popupA .note {
    background-color: #fff;
    background-image: url('https://loading.io/mod/spinner/blocks/index.svg'); /* Kan udelades */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}
.popupA:hover .note {
    width: 150px; /* størrelsen på "preview" */
    height: 150px;
    z-index: 1;
    border: solid 1px white;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
</style>
    <h2>Eksempel:</h2>
    <a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-001.jpg"></span><br>Seddel 123/123-001</a><br><br>
    <a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-002.jpg"></span><br>Seddel 123/123-002</a><br><br>
    <a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-003.jpg"></span><br>Seddel 123/123-003</a><br><br>
    <a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-004.jpg"></span><br>Seddel 123/123-004</a><br><br>
    <a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-005.jpg"></span><br>Seddel 123/123-005</a><br><br>
    <a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-006.jpg"></span><br>Seddel 123/123-006</a><br><br>

<script>
// Denne JavaScript function er nødvendig, og skal inkluderes på siden, hvor links skal vise noterne!
function loadNote(element) {
    let note = element.querySelector('.note'); // Noten til linket
    let imgsrc = note.getAttribute('data-image'); // URLen til noten
    note.style.backgroundImage = "url('"+imgsrc+"')"; // Indlæs URL som baggrund
}
</script>


Her er php-koden:
if (file_exists($filename))
{
    echo '<a class="popupA" onmouseover="loadNote(this)">';
    echo 'Vis seddel<span class="note" data-image="Sedler/'.$pKasse.'/'.$pKasse.'-'.$pNr.'.jpg">';
    echo '<br>Seddel '.$pKasse.'-'.$pNr.'</span></a>';
}
Avatar billede KurtG Forsker
26. juli 2021 - 09:56 #8
Undskyld lang tids fravær, sygdom har haft magten!

#6:
Jeg aner ikke, hvad jeg skal gøre på den første link (https://caniuse.com/loading-lazy-attr), for mig ligner det en oversigt over understøttede muligheder.
Det andet link giver mulighed for at download nogle ting, som jeg med mit knowhow ikke rigtig har mod på at prøve. Jeg er tæt på 80 år og indlæringskurven er fladet ud om ikke for nedadgående!

#7: Det ligner mere noget, som jeg kender, jeg vil afprøve det snarest, men har pt. forbud mod at røre hjemmesiden.

Tak for alle svarene, I er altid så behjælpelige!
Avatar billede KurtG Forsker
26. juli 2021 - 19:59 #9
Jeg fik lov at låne serveren og har afprøvet #7.

Det virker fint med undtagelse af et par ting:
Billedet vises til højre og under musen, når musen er på en linje i nederste del af browseren, kan man ikke se hele billedindholdet.
Jeg havde det før vist fast i øverste venstre hjørne, så man altid kunne se hele billedet.
Det vil jeg gerne have igen, og det klares nok med lidt css. Jeg har gjort det før, men husker ikke hvordan.
Desuden ser det ud til, at mine billeder bliver skrumpet, hvis de er større end de x=550 px og y= 450 px, som jeg har sat det til. Det vil jeg gerne have til at følge billedets størrelse som det gjorde oprindeligt.

Her er link til siden, så kan I selv se det!
https://www.vinderup-egnshistorie.dk/Register/visresultat.php?gruppe=a06&innr=&omhandler=&omhandler0=&soeg=Start+s%F8gning
Siden er lavet for 12-15 år siden og lever nok ikke op til dagens standard mht. design, men den virker!

Ja, når man rækker ............
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