在上悬停时加载图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在上悬停时加载图片相关的知识，希望对你有一定的参考价值。
虽然我一开始并不关心它，但我注意到我的页面大小约为9 MB（+/- 200张图像）。我想以某种方式通过仅在用户将鼠标悬停在特定<a>上时加载图像来减少这种情况，以便仅加载该图像（这将大大减少页面大小）。
下面的代码就是我现在正在使用的代码
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
<a href="/somename" target="_self" id="sid">Some Name</a>
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
我认为使用jQuery是可能的，但我不知道从哪里开始。
提前致谢。
答案
好吧，如果您的目录中有大约200个图像，当客户端请求网页时，如果您使用单页面布局，则必须下载图像以准备它们。就像亚当说的那样，我会研究延迟装载。如果可以的话，我建议您尝试压缩照片，如果可以的话，可以降低文件大小。祝好运！
另一答案
我通过调整现有的笔代码来调整我的需求（使用jQuery）来解决我的问题。它现在再次在IE / Firefox中运行
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
<a href="/gotoo" class="trigger" target="_self" id="sid">Hover over me to fetch an image</a>
<span data-original="https://lorempixel.com/g/150/200/"></span>另一答案
你可以把图像没有src属性，并将特定的src放在div或图像的href中！然后使用jquery获取图像的一个或数据-src的href，然后将其提供给图像，代码将是这样的：
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
这就是jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
以上是关于在上悬停时加载图片的主要内容，如果未能解决你的问题，请参考以下文章