美文网首页移动端疑难杂症
WKWebView的坑之图片显示不完全

WKWebView的坑之图片显示不完全

作者: Michaelin | 来源:发表于2018-08-20 19:28 被阅读1097次

    最近在做iPad Pro适配时遇到了WKWebView图片显示不完全的坑

    在显示网页中的大尺寸图片时,图片显示不完整,有些是下方不显示,有些是下方和右侧都不显示。流程如下

    第一类情况
    1. APP下方题目卡片初始状态
    在卡片出现时,显示了WKWebView上部内容。
    2. APP下方题目卡片展开状态
    点击卡片下方展开按钮或者上划手势,展开卡片,可以看到更多网页内容,但是下方图片无内容成白色。滑动图片后网页内容图片刷新,显示正常,如下
    3. APP下方题目卡片拖动后显示
    第二类情况

    如果WKWebView的初始状态为不可见时,如下

    4. APP下方题目卡片初始状态
    点击展开卡片,显示的图片只有左上角一小条,其他内容缺失,如下
    5. APP下方题目卡片展开状态
    同样滑动后页面会刷新,图片显示恢复正常。
    6. APP下方题目卡片拖动后显示

    原因分析

    WKWebView相比UIWebView提高了页面渲染载入速度,其中也包括只对展示给用户可见的内容进行渲染,这样可以大大提高载入速度。如我遇到的图片问题,WKWebView会把图片分割成多块,如下图A-F六块区域。

    WKWebView对图片分割成多块渲染
    在第一类情况,由于A/B/C块都是用户可见区域,所以WKWebView对这三块区域进行了渲染,而D/E/F块都没有渲染。所以展开卡片时,他也呈现空白状态,图片缺失。
    第二类情况则是所有区域都不在用户可视范围内,所以他仅对A块渲染,展开后B/C/D/E/F都为空白,图片缺失。这个可以在XCodeDebug View Hierarchy中得到验证,完整渲染的有六个区域,第一种情况三个区域,第二种状况只有一种区域。

    解决办法

    填坑办法就是强制让WKWebView重新渲染一次,代码如下

    [_webView setNeedsLayout];

    我是在展开卡片时增加了WKWebView强制重新渲染的代码实现。而对于网上提到比较多的,在UITableView中添加WKWebView图片载入不全的情况可以在- (void)scrollViewDidScroll:(UIScrollView *)scrollView中增加强制重新渲染的代码来解决。声称这个坑在iOS11中得到了修复,但是我的11.3的iPad Pro还是遇到了这个问题😂,可能是我们的WKWebView操作没有触发重新渲染吧。

    ----------------------------------------------- 编辑于20180821 -------------------------------------------------------
    最近出现了在iOS 8.2系统下图片显示过大,超出屏幕的问题。可以通过addUserScript解决,如下

                NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
                WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
                WKUserContentController *wkUController = [[WKUserContentController alloc] init];
                [wkUController addUserScript:wkUScript];
                [[_webView configuration].userContentController addUserScript:wkUScript];
    

    Reference List

    WKWebView not rendering correctly in iOS 10
    使用WKWebView 适应屏幕尺寸

    相关文章

      网友评论

        本文标题:WKWebView的坑之图片显示不完全

        本文链接:https://www.haomeiwen.com/subject/vgoliftx.html