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

我对JS很新，我的网页有一个很奇怪的问题。在页面的某些部分，有图片在中写过，鼠标上有zoon-in effect。问题是，为了看到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; 
}

来源

2015-02-10 user3355028

请分享您的代码 – PRAH 2015-02-10 05:41:41

“将脚本放在body的末尾”表示在结束body标记之前，而不是之后。我不知道浏览器如何解析不在身体内的脚本，我建议你把它们放在身体内部。如果你仔细想想，加载后再次加载页面将需要一些状态（不可取），或者你将递归地重新加载页面。 – 2015-02-10 05:54:46

好的，谢谢。我把它们放在体内，但问题还没有解决。 – user3355028 2015-02-10 05:57:29

解决问题比刷新页面更好，但是，要回答您的问题，可以使用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; 
}

来源

2015-02-10 06:32:41

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

回答

相关问题