使用NSURLProtocol为UIWebView缓慢下载的占位符图像

时间:2015-12-27 08:56:05

标签: ios uiwebview nsurlprotocol

我需要在我的WebView中加载来自iCloud Document Storage的图像我已经用我自己的NSURLProtocol实现解决了这个问题。我的问题是,下载非常慢,并且用户没有在网页中看到任何图像被下载的指示符。

我希望在完成真实图像的下载之前显示占位符图像:

public class EDAMResourceURLProtocol : NSURLProtocol
{

    public override func startLoading() {

       let url = self.request.URL!
       let hash = url.host!

       // I want to show this image before the real content gets downloaded
       let image = UIImage(named: "DownloadPlaceholder")

       // this function is very slow ....
       historyStorage.fetchResourceWithBody(hash, success: {
        edamResource in

        let response = NSURLResponse(URL: self.request.URL!, MIMEType: edamResource!.mime, expectedContentLength: edamResource!.data!.body!.length, textEncodingName: nil)
        self.client!.URLProtocol(self, didReceiveResponse: response, cacheStoragePolicy: NSURLCacheStoragePolicy.NotAllowed)
        self.client!.URLProtocol(self, didLoadData: edamResource!.data!.body)
        self.client!.URLProtocolDidFinishLoading(self)
        }

在真实内容可用之前,您有什么想法可以展示占位符吗?

2 个答案:

答案 0 :(得分:1)

我认为EDAMResourceURLProtocol类/对象不应该负责显示占位符图像,因此您可以尝试编写一些JS代码,将占位符放在页面上的某个位置,直到发生所需的内容。 / p>

或者,将UIImage转换为NSData并将其传递给客户端委托两次(一次在请求之后,第二次在成功块中,正如您现在所做的那样)。

答案 1 :(得分:0)

我明白了。解决方案是,我在style.css中设置了一个带占位符图像的背景图像:

  img {
       max-width: 100%;
       min-width: 64px;
       min-height: 64px;
       height: auto;
       margin: 32px auto;
       display:block;
       background: url('edam://placeholder') no-repeat;
    }

我使用自己的edam://协议在我的NSURLProtocol类中加载占位符图像。

   public class EDAMResourceURLProtocol : NSURLProtocol
   {
       public override func startLoading()
       { 
           let url = self.request.URL!
           let hash = url.host!

            if hash == "placeholder" {
               let bundle = NSBundle(forClass: object_getClass(self))
               let path = bundle.pathForResource("Fading lines", ofType: "gif")!
               let data = NSData(contentsOfFile: path)
               sendResponse("image/gif", data: data!)
               return
           }

           // here starts the slow download
           historyStorage.fetchResourceWithBody(hash, success: {
            edamResource in

           sendResponse ...