如何在Collection View中预加载当前页前后2个WKWebView单元格？

完全可以实现这种预加载逻辑，下面是针对你的全屏分页场景的实操方案和关键注意事项：

核心思路 #

利用UICollectionView的滚动回调确定当前显示的页面索引，手动触发指定范围内（当前索引±2）单元格的WKWebView内容加载，同时通过WebView复用和内存管控避免性能问题。

具体实现步骤 #

1. 追踪当前显示的页面索引 #

在滚动停止时，根据CollectionView的contentOffset计算当前居中的页面索引（横向分页用x偏移除以宽度，纵向分页替换为y偏移除以高度）：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    guard let collectionView = scrollView as? UICollectionView else { return }
    let currentIndex = Int(collectionView.contentOffset.x / collectionView.bounds.width)
    triggerPreload(withCurrentIndex: currentIndex, in: collectionView)
}

// 处理拖拽停止且无减速的场景
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        guard let collectionView = scrollView as? UICollectionView else { return }
        let currentIndex = Int(collectionView.contentOffset.x / collectionView.bounds.width)
        triggerPreload(withCurrentIndex: currentIndex, in: collectionView)
    }
}

2. 触发指定范围的预加载 #

编写预加载逻辑，计算需要预加载的索引范围，遍历并触发单元格的内容加载：

private func triggerPreload(withCurrentIndex currentIndex: Int, in collectionView: UICollectionView) {
    let totalItems = collectionView.numberOfItems(inSection: 0)
    let startIndex = max(0, currentIndex - 2)
    let endIndex = min(totalItems - 1, currentIndex + 2)
    
    for index in startIndex...endIndex {
        let indexPath = IndexPath(item: index, section: 0)
        // 优先处理已存在的可视单元格
        if let cell = collectionView.cellForItem(at: indexPath) as? WebViewCell {
            if !cell.isLoaded, let url = cell.targetURL {
                cell.loadContent(with: url)
            }
        } else {
            // 非可视单元格手动创建并预加载（仅完成内容加载，不会添加到视图）
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "WebViewCell", for: indexPath) as! WebViewCell
            if let url = getURL(forIndex: index), !cell.isLoaded {
                cell.targetURL = url
                cell.loadContent(with: url)
            }
        }
    }
}

// 自定义方法：根据索引获取对应页面的URL
private func getURL(forIndex index: Int) -> URL? {
    return URL(string: "https://example.com/page\(index)") // 替换为你的数据源逻辑
}

3. 单元格与WKWebView的复用管理 #

自定义CollectionViewCell，封装WKWebView并维护加载状态，复用时重置状态避免冲突：

class WebViewCell: UICollectionViewCell {
    var webView: WKWebView?
    var isLoaded = false
    var targetURL: URL?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupWebView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupWebView()
    }
    
    private func setupWebView() {
        let config = WKWebViewConfiguration()
        webView = WKWebView(frame: bounds, configuration: config)
        webView?.navigationDelegate = self
        webView?.scrollView.isScrollEnabled = false // 全屏单元格禁用WebView内部滚动
        addSubview(webView!)
        webView?.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView!.topAnchor.constraint(equalTo: topAnchor),
            webView!.leadingAnchor.constraint(equalTo: leadingAnchor),
            webView!.trailingAnchor.constraint(equalTo: trailingAnchor),
            webView!.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }
    
    func loadContent(with url: URL) {
        guard !isLoaded, webView != nil else { return }
        let request = URLRequest(url: url)
        webView?.load(request)
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        webView?.stopLoading()
        webView?.loadHTMLString("", baseURL: nil)
        isLoaded = false
        targetURL = nil
    }
}

extension WebViewCell: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        isLoaded = true
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        isLoaded = false // 加载失败标记为未加载，可后续重试
    }
}

关键注意事项 #

• 内存管控：WKWebView内存占用较高，预加载5个页面（当前±2）是合理上限。收到内存警告时，销毁非预加载范围内的WebView：

  override func didReceiveMemoryWarning() {
      super.didReceiveMemoryWarning()
      guard let collectionView = self.collectionView else { return }
      let currentIndex = Int(collectionView.contentOffset.x / collectionView.bounds.width)
      let totalItems = collectionView.numberOfItems(inSection: 0)
      let startIndex = max(0, currentIndex - 2)
      let endIndex = min(totalItems - 1, currentIndex + 2)
      
      for index in 0..<totalItems {
          if index < startIndex || index > endIndex {
              let indexPath = IndexPath(item: index, section: 0)
              if let cell = collectionView.cellForItem(at: indexPath) as? WebViewCell {
                  cell.webView?.removeFromSuperview()
                  cell.webView = nil
              }
          }
      }
  }
  

• 避免重复加载：通过isLoaded标记单元格的加载状态，确保每个页面只发起一次加载请求。
• 滚动流畅度：预加载操作可延迟执行，等滚动完全稳定后再触发，比如在triggerPreload里添加：

  DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
      // 预加载逻辑放在这里
  }
  

内容的提问来源于stack exchange，提问作者Stefan