javascript - Works in Console but not in .js file

I am trying to add width and height attributes to my images; the jQuery I used works in the console but not in the linked .js file. I have tried this and it doesn't work.

$(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);
    });
});

I also tried this but it also didn't work

$(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);
    });
});

I checked the console but everything seems to be fine. What else can I do?

I am trying to add width and height attributes to my images; the jQuery I used works in the console but not in the linked .js file. I have tried this and it doesn't work.

$(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);
    });
});

I also tried this but it also didn't work

$(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);
    });
});

I checked the console but everything seems to be fine. What else can I do?

Share Improve this question edited Jan 21, 2016 at 3:09 Tushar 87.3k21 gold badges163 silver badges181 bronze badges asked Jan 21, 2016 at 3:08 Darth Vader 4752 gold badges6 silver badges17 bronze badges

ready will fire when the DOM is ready. You need window's load event, so that the callback will be fired when all the images are pletely loaded. – Tushar Commented Jan 21, 2016 at 3:10
document.ready, doesnt really mean that the images are loaded. You might want to use load, as mentioned above. Care to share, a fiddle? – Jeremy Rajan Commented Jan 21, 2016 at 3:11

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

When the document ready callback executes during the initial page load cycle, the page will not have finished loading image data.

Because there's no image data, the images have neither widths nor heights.

Use $(window).on('load'...) instead of $(document).ready(...)

I have answered my own question: I did the following and it works perfectly

$(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);
    });
});

You make sure if your <script> tag is the end of your <body>. Which solved the same problem for me.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Works in Console but not in .js file - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)