页面加载后立即再次加载页面

我是JS的新手，我的网页出现了一个非常奇怪的问题。在页面的某些部分，有一些图像的鼠标上有zoon-in effect，上面写着jQuery。问题是，为了查看zoom-in effect，您需要再次加载页面。它不会在第一次加载页面时显示。

现在，<script>标签和指向jQuery库的引用链接位于页面的按钮（</body>标签下方）。如果我把它们移到页面顶部，zoom-in effect根本不起作用。

有人知道如何解决这个问题吗？是什么原因导致的？如果没有，有没有办法立即再次加载页面？我知道这不是一种优雅的方式，但如果我没有其他解决方案，那就是我要做的

感谢

JQuery

(function ($) {
$.fn.extend({
    hoverZoom: function (settings) {
        var defaults = {
            overlay: true,
            overlayColor: '#343434',
            overlayOpacity: 0.7,
            zoom: 25,
            speed: 300
        };
        var settings = $.extend(defaults, settings);
        return this.each(function () {
            var s = settings;
            var hz = $(this);
            var image = $('img', hz);
            image.load(function () {
                if (s.overlay === true) {
                    $(this).parent().append('<div class="zoomOverlay" />');
                    $(this).parent().find('.zoomOverlay').css({
                        opacity: 0,
                        display: 'block',
                        backgroundColor: s.overlayColor
                    });
                }
                var width = $(this).width();
                var height = $(this).height();
                $(this).fadeIn(1000, function () {
                    $(this).parent().css('background-image', 'none');
                    hz.hover(function () {
                        $('img', this).stop().animate({
                            height: height + s.zoom,
                            marginLeft: -(s.zoom),
                            marginTop: -(s.zoom)
                        }, s.speed);
                        if (s.overlay === true) {
                            $(this).parent().find('.zoomOverlay').stop().animate({
                                opacity: s.overlayOpacity
                            }, s.speed);
                        }
                    }, function () {
                        $('img', this).stop().animate({
                            height: height,
                            marginLeft: 0,
                            marginTop: 0
                        }, s.speed);
                        if (s.overlay === true) {
                            $(this).parent().find('.zoomOverlay').stop().animate({
                                opacity: 0
                            }, s.speed);
                        }
                    });
                });
            });
        });
    }
});
})(jQuery);

HTML:

<div class="portItemContainer">
    <div class="portItem">
        <a href="Portfolio/index.html" target="_blank" class="zoom grey"><img src="Images/meals.png" alt="" /></a>
        <h5>Meals APP</h5>
        <h6>FRONTEND / UX / CREATIVE</h6>
        <a href="Portfolio/index.html" target="_blank">Visit The Website</a>
        <p>
            some text
        </p>
    </div>

CSS:

.zoom {
    width:230px;
    height:148px;
    position:relative;
    overflow:hidden;
    border:1px solid #959595;
    background: #fff url(../Images/loader.gif) no-repeat center;
}
.zoom img { display:none }
.zoomOverlay {
    position:absolute;
    top:0; left:0;
    bottom:0; right:0;
    display:none;
    background-image:url(../Images/zoom.png);
    background-repeat:no-repeat;
    background-position:center;
}