Question

我对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;
}

Answer 1

修复问题比刷新页面更好，但是，为了回答您的问题，您可以使用GET参数刷新页面一次。

var reloadKey = 'rl001';
var url = window.location.href;
testForReload();
function testForReload() {
    if (url.indexOf('?') < 0) {
        reloadPage();
        return false;
    }
    var getParams = url.substr(url.lastIndexOf('?') + 1);
    if (getParams.indexOf(reloadKey) < 0) {
        reloadPage();
    }
}
function reloadPage() {
    var q = (url.indexOf('?') < 0) ? '?' : '&';
    window.location = url + q + reloadKey;
}

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

1 个答案: