当前位置:小鱼儿玄机二站 > 前端技术 > 的贯彻思路及代码

的贯彻思路及代码

文章作者:前端技术 上传时间:2019-09-03

当我们要突显后台传过来若干个尺寸不一的图形时,为了有限协理图片大小的一致性及比例的和睦,必要动态改换图片体现尺寸。通过搜寻,大家能够从英特网找到完成此意义的jQuery代码如下。这段代码能够使图片的高低保持在早晚限制内,借使图片的原始尺寸都大于max*值,则展现出来的图样宽度都极其。

原始代码:

复制代码 代码如下:

$(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);    // 设定等比例缩放后的惊人
     }
 });
 });

在本人的js代码中,也利用了这种写法。然则在差异的浏览器测验效果时,开采此种写法不可能适应chrome浏览器(chrome版本号为10.0.648.204),会发生图片以本来面目尺寸展现出来的bug。后来把$('.post img').each()的代码用$(window).load()方法包装起来,就消除了chrome浏览器展现不科学的难题。那么在chrome浏览器中为何会产生bug,况且$(document).ready和$(window).load有怎样分别吧?

原来document ready事件是在HTML文书档案载入即DOM准备好就起来实施了,就算图片能源还未有加载进来。而window load事件施行的稍晚一些,它是在全方位页面包蕴frames, objects和images都加载成功后才开端举行的。从这种区别能够深入分析出chrome浏览器在对于图片不使用$(window).load()方法管理时,图片载入与动态改造图片的js代码试行顺序不鲜明。

有关地点的代码,放到本人的页面中时取得图片中度时会报错,提醒未有提供width方法

复制代码 代码如下:

var width = $(this).width();    // 图片实际增长幅度
     var height = $(this).height();  // 图片实际中度

故修改代码如下:

复制代码 代码如下:

jQuery(window).load(function () {
            jQuery("div.product_info img").each(function () {
                DrawImage(this, 680, 1000);
            });
        });
        function DrawImage(ImgD, FitWidth, FitHeight) {
            var image = new Image();
            image.src = ImgD.src;
            if (image.width > 0 && image.height > 0) {
                if (image.width / image.height >= FitWidth / FitHeight) {
                    if (image.width > FitWidth) {
                        ImgD.width = FitWidth;
                        ImgD.height = (image.height * FitWidth) / image.width;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                } else {
                    if (image.height > FitHeight) {
                        ImgD.height = FitHeight;
                        ImgD.width = (image.width * FitHeight) / image.height;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                }
            }
        }

...

本文由小鱼儿玄机二站发布于前端技术,转载请注明出处:的贯彻思路及代码

关键词: