是否可以使用 jQuery 创建一个预加载 div 的页面转换，以便加载之间不会闪烁？

发布于 2024-09-05 22:15:51 字数 1034 浏览 6 评论 0原文

情况是这样的：我正在开发一个网站，其导航位于主页的页面底部，但位于所有其他页面的页面顶部。我已经设置了一些 jQuery，这样当单击任何子页面的链接时，导航将向上滑动到在转换到下一页之前位于所有其他页面上的位置（并且还制作了一些小样式）进行调整以使其完美匹配）。只是这样：

$('#nav a').click(function(){ 
  var url = $(this).attr('href'); //save the url
  $('#top-container').removeClass('home-top-container'); //remove the special home page styles
  $('img').slideUp('slow', function(){ //slide up the main image-- this places the nav at the exact position of all interior pages
    document.location.href = url; //when it's finished, proceed to the page
  });
  return false;
});

这将是一个完美的“外观”，当然，除了页面转换之间有一点页面加载时间之外，因此导航会消失然后重新出现一秒钟，就像您所期望的那样。但这确实会分散你的注意力，因为你的眼睛已经集中在刚刚移动的导航上。

所以，我想知道是否有任何方法可以使用 jQuery 来查找目标页面中的 #nav div 并在移动到该页面之前预加载它（这样就不会闪烁）？或者有其他方法可以在转换过程中保持导航显示而不中断？

我有一种感觉，我正在要求不可能的事情。但至少值得一问。

预计到达时间：以下是该网站的示例链接：http://www.studioal.com/sample/ 单击“WORK”（这是唯一的工作链接），

我不想淡入和淡出，因为我希望导航在整个过渡过程中保持在 100%（我认为一旦参见示例）。

原文

Here's the situation:
I'm working on a site where the navigation is located on the bottom of the page on the home page, but on the top of the page for all other pages. I've set up some jQuery so that when a link is clicked to any of the subpages, the navigation will slide up to the position is is located on all other pages prior to transitioning to the next page (and also makes a few small styling tweaks to make it match up perfectly). Just this:

$('#nav a').click(function(){ 
  var url = $(this).attr('href'); //save the url
  $('#top-container').removeClass('home-top-container'); //remove the special home page styles
  $('img').slideUp('slow', function(){ //slide up the main image-- this places the nav at the exact position of all interior pages
    document.location.href = url; //when it's finished, proceed to the page
  });
  return false;
});

It would be a perfect "look" except for the fact that, of course, there's a little bit of page load time between the page transitions, so the navigation disappears then reappears for a second, just like you'd expect. But it's really distracting since your eye is already focused on the nav that was just moving around.

So, what I'm wondering is if there's any way to use jQuery to seek out that #nav div in the destination page and preload it prior to to moving on to that page (so that there's no flicker)? Or any other way to keep the nav displaying without interruption during the transition?

I have a feeling that I'm asking for the impossible. But it's worth asking, at least.

ETA: Here's an example link for the site: http://www.studioal.com/sample/
Click on "WORK" (it's the only working link)

I'd prefer not to fade in and out, as I'd love to have the navigation remain at 100% through the full transition (I think that will be easier to understand once seeing the example).

分享到QQ

分享到微博