Question

我正在尝试为我的图像添加宽度和高度属性;我使用的jQuery在控制台中工作，但在链接的.js文件中没有。我试过这个并且它没有用。

$(document).ready(function () {
    $('.media-box-image').each(function () {

        var $width = $('.media-box-image').width();
        var $height = $('.media-box-image').height();
        var $this = $(this).find('img');

        $this.attr('width', $width);
        $this.attr('height', $height);
    });
});

我也试过了，但它也没有用

$(document).ready(function () {
    $('.media-box-image').each().on('load', function () {

        var $width = $('.media-box-image').width();
        var $height = $('.media-box-image').height();
        var $this = $(this).find('img');

        $this.attr('width', $width);
        $this.attr('height', $height);
    });
});

我检查了控制台，但一切似乎都很好。我还能做什么？

Answer 1

在初始页面加载循环期间执行文档就绪回调时，页面将无法完成加载图像数据。

由于没有图像数据，图像既没有宽度也没有高度。

使用$(window).on('load'...)代替$(document).ready(...)

Answer 2

请确保您的<script>标签是否在<body>的结尾。哪个为我解决了同样的问题。

<body>
<!--your HTML-->
<script src="..."></script>
</body>

Answer 3

我已经回答了我自己的问题：我做了以下工作并且完美无缺

$(window).load(function () {
    // Run code
    $('.media-box-image').each(function () {
        var $width = $('.media-box-image').width();
        var $height = $('.media-box-image').height();
        var $this = $(this).find('img');

        $this.attr('width', $width);
        $this.attr('height', $height);
    });
});

适用于Console，但不适用于.js文件

3 个答案: