在上悬停时加载图片

Question

虽然我一开始并不关心它，但我注意到我的页面大小约为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是可能的，但我不知道从哪里开始。

提前致谢。

Answer 1

好吧，如果您的目录中有大约200个图像，当客户端请求网页时，如果您使用单页面布局，则必须下载图像以准备它们。就像亚当说的那样，我会研究延迟装载。如果可以的话，我建议您尝试压缩照片，如果可以的话，可以降低文件大小。祝好运！

Answer 2

我通过调整现有的笔代码来调整我的需求（使用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>

Answer 3

你可以把图像没有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);
         });
      });