在现代网站中，图片是不可或缺的元素之一。然而在网络中传输大量图片，尤其是大尺寸的图片，会导致网页额外的加载时间，影响用户体验。如何在不牺牲视觉体验的前提下，减少图片加载时间呢？Javascript 动态加载图片大小可以成为一种可行的解决方案。动态加载图片大小的概念比较容易理解，即在加载网页时，先显示一个尺寸较小的图片，待图片下载完成后，再替换成真实尺寸的图片。以图片懒加载（lazy loading）技术为例，下面给出一个常见的实现方式：

function addImage(img, callback) {var tempImg = new Image();tempImg.onload = callback;tempImg.src = img.dataset.src;img.src = "/post/placeholder.gif";}

在这个例子中，我们传递两个参数。第一个参数 “img” 指的是我们在 HTML 中定义好的标签.. 第二个参数是一个回调函数，表示当真实尺寸的图片被成功加载后，我们执行的操作。接下来，我们创建了一个“临时图片”对象 “tempImg”。这个对象的作用在于，我们在加载大尺寸图片之前，先加载一张尺寸比较小的图片（比如一个 loading icon），作为占位符，以便尽早地展现网页内容。接着，我们将上述步骤所需的图片地址传给我们定义好的 tempImg.src。最后，一旦 tempImg 加载成功后，我们再将图片的实际路径 img.src 赋值给img。动态加载图片不仅可以减少图片加载时间，同时大大降低了带宽的占用率，也可以实现响应式设计，提升网页的性能。当然，在实践中还需要考虑很多细节问题，比如如何设置占位符的大小，如何避免图片闪烁等等。总之，在实际应用中，动态加载图片是一种非常实用的技术手段，可以让网页站长更好地管理和优化所需加载的图片，让网站设计实现更加优秀和出色。