Laden Sie das Bild, während Sie den Mauszeiger über den Linktext bewegen (CSS + Javascript)

Question

Ich verwende CSS, um ein Bild bei Hover anzuzeigen.

HTML Markup

<a class="preview" href="#"> Preview 
<img src="thumbnail_01.jpg" class="hide-image" /> 
</a> 

CSS

.hide-image { 
    display: none; 
    z-index: 100; 
    position: absolute; 
} 
.preview:hover .hide-image { 
    display: block 
} 

Wenn der Benutzer über die "Vorschau" link schwebt, das Bild wird angezeigt.

Der Code funktioniert. Allerdings habe ich über 100 Bilder und sie laden alle gleichzeitig! Ich möchte, dass sie nur geladen werden, wenn der Benutzer über den Link schwebt.

Answer 1

Laden Sie das Bild, während Sie den Mauszeiger über den Linktext bewegen.

var alist = document.getElementsByClassName("preview"); 
 

 
for (var i = 0; i < alist.length; i++) { 
 
    alist[i].addEventListener('mouseover', function(num) { 
 
    return function() { 
 
     loadImg(alist[num]); 
 
    } 
 
    }(i), false); 
 
} 
 

 
function loadImg(x) { 
 
    x.querySelector(".hide-image").src=x.getAttribute("data-my-img"); 
 
}

<a class="preview" href="#" data-my-img="https://www.colormango.com/tipsimg/javascript.jpg">preview JS 
 
    <img class="hide-image" /> 
 
</a>

Answer 2

Die ideale Lösung dafür ist die Verwendung von jQuery, damit das Bild nur so lange geladen wird, wie Sie es möchten. Auf Ihrem html können Sie nur das Eltern-Div mit einem Attribut seines Image-URL-Pfades laden und dann in den Js-Code das Image-Tag initialisieren.

<a class="preview" href="#" data-url="thumbnail_01.jpg"></a> 

und dann in JavaScript

$(document).ready(function(){ 
    $(".preview").hover(function(){ 
    var imgurl = $(this).attr('data-url'); 
    $(this).html('<img src="'+imgurl+'" class="hide-image" />'); 
    }) 
}); 

Wenn Sie das Bild auf dem HTML-Inhalt rufen entweder es versteckt ist oder nicht, sobald die Seite geladen wird geladen. Also das Javascript tut nur den Trick in die Funktion, die ausgelöst wird.

Answer 3

<style type="text/css"> 
    .hide-image { 
    display: none; 
    z-index: 100; 
    position: absolute; 
} 
.preview:hover .hide-image { 
    display: block 
} 
    </style> 
<a class="preview" href="#"> 
<img src="thumbnail_01.jpg" class="hide-image" /> 
Link 
</a> 

Dies wird Ihnen helfen, denke ich ..

Answer 4

Tut dies der Trick?

https://jsfiddle.net/sheriffderek/1b0b0h6a Ich bin sicher, es gibt viel glatte Wege, dies zu tun ...

$('.thing').hover(function() { 
 
    var $thisThing = $(this); 
 
    var thisSource = $thisThing.data('source'); // get the real image url 
 
    var $thisImage = $thisThing.find('img'); // cache the node for the img 
 
    $thisImage.attr('src', thisSource); // add the src attr of the real url 
 
    $thisImage.one('load', function() { // after a load... (just the one time is all you need .on() vs .one() 
 
    $thisThing.addClass('loaded'); 
 
    }); 
 
});

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.image-w img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.thing-list .thing { 
 
    background: lightgreen; 
 
    position: relative; 
 
    max-width: 100px; 
 
    display: inline-block; // for now 
 
} 
 

 
.thing-list .link { 
 
    display: block; 
 
} 
 

 
.thing-list img { 
 
    opacity: 0; 
 
} 
 

 
.thing-list .title { 
 
    position: absolute; 
 
    top: 1rem; 
 
    left: 1rem; 
 
} 
 

 
body { 
 
    padding: 1rem; 
 
} 
 

 
h1 { 
 
    margin-bottom: 1rem; 
 
} 
 

 
.thing-list .loaded img { 
 
    opacity: 0; 
 
    transition: .2s; 
 
} 
 

 
.thing-list .loaded:hover img { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Things</h1> 
 

 
<ul class='thing-list'> 
 

 
    <li class='thing' data-source='https://unsplash.it/3000'> 
 
    <a class='link image-w' href='#'> 
 
     <img src='https://placehold.it/300' alt='Image name'> 
 
     <h2 class='title'>thing 1</h2> 
 
    </a> 
 
    </li> 
 
    
 
    <li class='thing' data-source='https://unsplash.it/3100'> 
 
    <a class='link image-w' href='#'> 
 
     <img src='https://placehold.it/300' alt='Image name'> 
 
     <h2 class='title'>thing 2</h2> 
 
    </a> 
 
    </li> 
 

 
    <li class='thing' data-source='https://unsplash.it/3200'> 
 
    <a class='link image-w' href='#'> 
 
     <img src='https://placehold.it/300' alt='Image name'> 
 
     <h2 class='title'>thing 3</h2> 
 
    </a> 
 
    </li> 
 

 
</ul>

Sie werden JavaScript verwenden, haben die Bildquelle einstellen> prüft Bild vollständig geladen> fügen Sie dann eine Klasse hinzu, um es einzublenden usw. - aber vielleicht ist Ihr Problem auch die Größe der Bilder. Vielleicht können Sie sie auch kleiner in Dateigröße bekommen.