Html 悬停时弹出图像css链接

我正在尝试使用以下技术 创建我用php动态生成的弹出图像悬停效果。我对这种技术有一个问题，即当页面加载时，每个图像都会被下载。如何让css只下载悬停时的图像。？

---

现在，当页面加载（左：-1000px；）时，css正在将图像从屏幕上推出，然后在悬停时将它们带回视图。使用css是否可以实现这一点？那么我还有什么其他选择？

使用jQuery查看延迟加载图像：

---

以下是一些其他选项：

而不是将img src属性设置为链接。使用该链接设置属性数据src。当您悬停时，从data src属性设置图像的src。然后浏览器将加载它

HTML代码在这里

.gallerycontainer{
位置：相对位置；
}
.缩略图像{
边框：1px纯白；
边距：0 5px 5px 0；
}
.缩略图：悬停{
背景色：透明；
}
.缩略图：悬停img{
边框：1px纯蓝色；
}
.缩略图跨度{
位置：绝对位置；
背景色：浅黄色；
填充物：5px；
左：-1000px；
边框：1px灰色虚线；
可见性：隐藏；
颜色：黑色；
文字装饰：无；
}
.缩略跨度img{
边框宽度：0；
填充：2px；
}
.缩略图：悬停范围{
能见度：可见；
排名：0；
左：230像素；
z指数：50；
}

jQuery将是一种非常简单的方法，很明显，延迟加载插件在最新的浏览器中不起作用。刚刚在Chrome中测试过，lazyload确实起作用（初始加载完成后需要更多图像时，它会发出一个调用）。这将在页面加载时仍然加载图像。尽管这已经快5岁了，但这不是他想要的。