Question

我正在使用此方法，仅在网址鼠标悬停后显示图片：

<a href="URL" class="infotext">TITLE<span><img src="IMAGE-URL"></span></a>

因此只有在鼠标悬停后才显示图片。问题是，在使用此方法时，打开站点后，所有图片都将从服务器加载。它们可能无法显示，但它们会被加载。因此，如果您有100个带有鼠标悬停图像的链接，则在打开网站后会加载所有100个图像，从而产生大量流量。

是否有任何代码使得标签内的图片仅从服务器加载，＆gt; IF＆lt;有一个鼠标悬停？

这是CSS：

a.infotext{
text-decoration: none;
}

a:hover.infotext {
color: #E2E2E2;
text-decoration: none;
}

a.infotext span {
visibility: hidden;
position: absolute;
left: 2em;
margin-top: 2em;
padding: 1em;
text-decoration: none;
}

a:hover.infotext span {
visibility: visible;
border: 1px solid #292929;
color: #347BEE;
background: #040404;
text-decoration: none;
width: 432px
}

Answer 1

我知道这不是一种css方法，但是我使用onmouseover创建一个快速（非样式）演示来有条件地加载图像，javascript将允许您定位特定图像。希望这可以帮助你！

的Javascript

function loading()
{
  var image = document.getElementById('image');
  image.setAttribute('src', 'img/placeholder.png');
}

这是HTML

    <a href="#" onmouseover="loading(this)">Load image</a>
    <img id="image" src="" alt="">

Answer 2

删除Image标签。给span一个data-imgsrc：

<span data-imgsrc="IMAGE-URL"> </span>

在悬停时追加（）img-tag并将其删除

$( "a" ).hover(
function() {
var that = $( this ).next("span[data-imgsrc='IMAGE-URL']");
that.append( '<img src='+ that..attr("data-imgsrc")+'/>' );
}, function() {
$( this ).removeit;
}
);

没有经过测试但是我希望你能得到这个想法，并且比伪代码更好。

仅在鼠标悬停在URL上后加载图像（使用DIV标记）

2 个答案: