如何实现，点击了链接，先开窗口，然后再加载

Question

遇到一直没解决的问题，有些HTML页面，内容少的，即点即开，可是遇到内容多的，我这边点击后，要过好久才能打开页面，严重影响体验感，我看到别人网页，都是点击链接后，先打开空白窗口，然后再逐渐加载内容，或者是先弹出加载进度条，然后等加载完毕再打开页面，但这两种页面我不会实现，请指教，万分感谢！

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

实现点击链接先打开一个空窗口（新标签页）然后加载内容的方法：

1. 使用JavaScript和HTML：

   • 在HTML中，为你的链接添加target="_blank"属性，这将使其在新的浏览器标签页中打开。

   <a href="your_long_content_url" target="_blank">点击加载内容</a>
   

2. 使用JavaScript异步加载内容：

   • 当新标签页打开时，你可以使用window.open方法创建窗口，然后在后台异步加载内容。这里需要结合fetch或者axios等库来获取内容。

   function loadContent(url) {
     const win = window.open('', '_blank');
     win.addEventListener('load', function() {
       fetch(url)
         .then(response => response.text())
         .then(content => {
           // 将内容填充到新窗口的body中
           win.document.body.innerHTML = content;
         });
     });
   }
   loadContent('your_long_content_url');
   

3. 显示加载进度条：

   • 可以在新窗口中添加一个简单的进度条，当内容开始加载时显示，加载完成后隐藏。

   <div id="progressBar" style="display: none;">加载中...</div>
   

   function showProgress(win) {
     const progressBar = win.document.getElementById('progressBar');
     progressBar.style.display = 'block';
   }
   
   function hideProgress(win) {
     const progressBar = win.document.getElementById('progressBar');
     progressBar.style.display = 'none';
   }
   
   // ... 在fetch的then回调中，在开始和结束时调用showProgress和hideProgress
   

确保你的服务器响应速度快，同时考虑分块加载大内容，以改善用户体验。如果内容是动态生成的，可能需要优化服务器端逻辑或使用懒加载技术。