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

【问题标题】：Load page again immediately after page load页面加载后立即再次加载页面
【发布时间】：2015-02-10 14:32:41
【问题描述】：

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

【问题讨论】：

请分享您的代码
“将脚本放在正文末尾”是指在正文结束标记之前，而不是之后。我不知道浏览器将如何解析不在正文中的脚本，我建议您将它们放在 inside 正文中。而且，如果您考虑一下，加载后再次加载页面将需要一些状态（不可取），否则您将递归地重新加载页面。
好的，谢谢。我将它们放入体内，但问题尚未解决。
你有没有任何控制台错误队友..??
你能把我们链接到这个网站吗？解决问题比刷新页面要好得多。

标签： javascript jquery html

【解决方案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;
}

【讨论】：