javascript - 完全加载一个链接

Question

我正在尝试宣传广告商，当用户点击广告商链接时，它会在到达广告商的网站之前通过不同的链接重定向 5-6 次(出于跟踪目的)。

是否可以在用户点击链接的页面上显示某种加载图标，然后在链接完全加载后将用户重定向到广告商的网站？

我搜索并找到了这段代码，但我不确定如何在我的案例中实现它:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

//paste this code under the head tag or in a separate js file.
	// Wait for window load
	$(window).load(function() {
		// Animate loader off screen
		$(".se-pre-con").fadeOut("slow");;
	});

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

<div class="se-pre-con"></div>

Answer 1

由于它重定向到别人的网站，您不能更改那些网站的内容以具有加载图标。

您可以将其加载到 iframe 中，当 iframe 在 5 秒内未更改其位置时，将 iframe 显示为整个页面并隐藏加载图标。您还可以将目标设置为“_top”，以便在您单击链接时更改浏览器中的 url。

<a href="http://example.com/tracking-link" class="tracking">Click!</a>
<iframe id="preload-frame" style="position: absolute; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0;" hidden>
<script type="text/javascript">var iframe=false;</script>
</iframe>
<div class="se-pre-con" hidden></div>

var frame = document.getElementById('preload-frame');
onclickConstructor = function (href) {
  return function() {
    document.getElementsByClassName('se-pre-con')[0].removeAttribute('hidden');
    var timer;
    var cleanup = function() {
      frame.removeAttribute('hidden');
      frame.setAttribute('target', '_top');
      document.getElementsByClassName('se-pre-con')[0].setAttribute('hidden', 'true');
    }
    frame.onload = function() {  // Whenever the iframe (re)loads the whole page
      if (timer) {
        (clearTimeout || clearInterval)(timer);
      }
      timer = setTimeout(cleanup);
    }
    frame.src = href;
  };
}

if (iframe !== false) {
  var trackingLinks = document.getElementsByClassName('tracking'), function(el); 
  for (var i = 0; i < trackingLinks.length; i++) {
    el.onclick = onclickConstructor(el.href);
    el.href = 'javascript:void(0);';
  };
}