使用jQuery动态改变图片显示大小

原创于 2020-02-28 14:45:56 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

文章标签：

博客探讨了在Chrome浏览器中使用jQuery动态改变图片显示大小时遇到的溢出问题。通过对比(document).ready与(window).load的区别，解释了Chrome中可能产生图片显示不正确的原因，即图片加载与JS执行的顺序不确定性。解决方案是使用(window).load包裹代码，确保在所有资源加载完毕后再执行图片调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完美解决图片过大溢出问题

$(document).ready(function() {
    $('.post img').each(function() {
    var maxWidth = 100; // 图片最大宽度
    var maxHeight = 100;    // 图片最大高度
    var ratio = 0;  // 缩放比例
    var width = $(this).width();    // 图片实际宽度
    var height = $(this).height();  // 图片实际高度
 
    // 检查图片是否超宽
    if(width > maxWidth){
        ratio = maxWidth / width;   // 计算缩放比例
        $(this).css("width", maxWidth); // 设定实际显示宽度
        height = height * ratio;    // 计算等比例缩放后的高度
        $(this).css("height", height);  // 设定等比例缩放后的高度
    }
 
    // 检查图片是否超高
    if(height > maxHeight){
        ratio = maxHeight / height; // 计算缩放比例
        $(this).css("height", maxHeight);   // 设定实际显示高度
        width = width * ratio;    // 计算等比例缩放后的高度
        $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
    }
});
});

不同的浏览器测试效果时，发现此种写法不能适应chrome浏览器（chrome版本号为 10.0.648.204），会产生图片以原有尺寸显示出来的bug。后来把 $(^{'} . p o s t i m g^{'}) . e a c h () 的代码用$ (window).load()方法包装起来，就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug，并且 $(d o c u m e n t) . r e a d y 和$ (window).load有什么区别呢？

原来document ready事件是在HTML文档载入即DOM准备好就开始执行了，即使图片资源还没有加载进来。而window load事件执行的稍晚一些，它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时，图片载入与动态改变图片的js代码执行顺序不确定。