产品组合：为页面性能加载隐藏图像的最佳方式

Question

在我的投资组合页面中，正面显示图像和名称列表，如果单击其中一个，则进入项目内部（显示在同一空间中）。投资组合图像隐藏在开头但仍然加载。优点是，一旦你点击就已经加载了它们，不利的是，它们无论是否需要加载，最后会有很多相当大的图像，特别是在移动设备上可能不利于用户它装了。

请参阅JSfiddle以了解它是如何工作的。有没有办法只在点击时加载图像（足够快）？我可以以某种方式将它们保存在其他地方，并从另一方获得html部分吗？

https://jsfiddle.net/cvall/zaa69bdc/7/

var $Projects = $("#work-right li")
var $titleList = $("#work-left")

var workFunction = function() {
  $($Projects).fadeOut().removeClass("active");
  var selectedProject = $($Projects).eq($(this).index());
  $(selectedProject ).fadeIn(700).addClass("active");
};

$("#base-img").on('click', 'img', workFunction);
$($titleList).on('click', 'li', workFunction);