在页面加载之前使用 jQuery 定位图像答案

【问题标题】：Using jQuery to target an image before page loads在页面加载之前使用 jQuery 定位图像
【发布时间】：2017-09-07 13:50:20
【问题描述】：

我正在开发一个网站，该网站有一个图片库，并且用户正在上传大量图片。我的图片库包含的 div 设置为某个 400px 宽度以匹配布局。我遇到的问题是页面加载，一瞬间，画廊中的第一张图片以正常大小（巨大）加载到页面上，然后 css 启动并将图像大小调整为 400px。我想知道是否有办法在呈现站点代码之前定位和更改图像大小。比如：

jQuery( window ).load(function($) {
    //step 1: find the image using the unique css class it is inside
    //step 2: resize image to 400px
    //step 3: let rest of site html/css/jquery load
});

我正在使用 $(window).load 而不是 $(document).ready 来尝试在 html/css/jquery 启动之前定位图像。非常感谢您对此主题的任何见解/帮助。

【问题讨论】：

你能把实际的代码放进去吗？（第 2 步）
请提供最低限度，verifiable, complete example。另外，你搞错了：document.ready happens before document.load
document.ready 在 window.load 之前触发。 window.load 在下载所有页面资源、css、脚本、图像时触发。将你的 CSS 放在页面的 head 部分。
我认为这会增加页面加载时间当您上传任何图像时制作缩略图并显示它是个坏主意。
您可以在后端使用图像大小调整软件并提供较小的图像以提高页面加载速度:)

标签： javascript jquery html css image

【解决方案1】：

尝试将width 和height 属性添加到图像元素。将样式应用于特定类时，您的 CSS 将覆盖这些属性。此外，您无需与 JS 混为一谈。

<img src="image.jpg" width="400" height="auto">

【讨论】：

是的，这绝对是一个绝妙的主意。测试，确认；立即投入生产！