我和Isotope一起工作，其中有很多图像。
问题是当从智能手机访问我的单页网站时，加载页面需要相当多的时间，因为当同位素本身加载时，同位素会加载所有图像缩略图。
所以，基本上我想隐藏/不加载所有不显示的图像，如果它的类别没有被点击，我做的是使用两个解决方法：
将图形设置为显示：无，以便它不显示应该是的空白，其他图像实际上可以占据该空间
将img src设置为about：blank，以便在点击其类别之前不加载
然后当链接＆＃34;点击我！＆＃34;（类别）被点击时，图形被设置为显示：块并且img src被实际图像路径替换。
式：
#showfigure{
display:none; !important
}
体：
<a href="#" data-filter=".imgtoshow" onclick="javascript:showAll();">Click me!</a>
<figure id="showfigure" class="filter imgtoshow">
<img id="showimg" src="about:blank" alt="">
</figure>
脚本：
<script>
function showAll() {
document.getElementById("showfigure").style.display = 'block';
$("#showimg").attr("src","example.jpg");
};
</script>
现在，我用它来处理多个图形/图像的唯一方法是给每个图形和图像它自己的id（showfigure1，showfigure2，showfigure3等...以及showimg1，showimg2，showimg3等。 ..）因为使用相同的id只适用于代码中的第一个数字/ img。
我错过了什么吗？
我试着像这样替换img src的路径：
但我无法通过链接中的onclick功能来做同样的事情＆＃34;点击我！＆＃34;，无论如何，ids都存在同样的问题。< / p>
提前感谢您的帮助！