在一个新闻的项目中，使用到了webView加载HTMLStr来展示新闻。问题出在，当新闻中图片过多并且很多gif图的时候WebView或出现卡顿和加载缓慢的问题。
先附上测试用的html代码
<p style="text-align: justify; line-height: 2em;">之前跟大家说过，拉斯维加斯拥有众多世界级的明星厨师和高级侍酒师，从 Nobu 到Guy Savoy，几乎每一个餐厅内都有名厨，比如著名厨师André Rochat、Charlie Palmer、Mario Batali ，比如著名酿酒师Joseph Bastianich。</p><p style="text-align: justify; line-height: 2em;">今天我要给大家隆重介绍的是“世纪名厨”Joël Robuchon和他在拉斯维加斯米高梅酒店（MGM Grand）的Joël Robuchon餐厅。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">Joël Robuchon餐厅由行政总厨Claude Le Tohic和面点师 Salvatore Martone共同经营，可以说是拉斯维加斯餐饮业的最高水准，也是当地唯一一家米其林三星级餐馆。</p><p style="text-align: justify; line-height: 2em;">既然是顶级餐厅，价格昂贵也是正常的，谁让人家的老板、厨师、面点师都名气那么大呢，不贵倒显得不正常了。普通大众怕是有点消费不起，不过，如果你有幸能在拉斯维加斯赢个一两盘，有些进账之后，倒是不妨来体验一次，也算是不虚此行了。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">Joël Robuchon 先生是全世界拥有最多米其林星级餐厅的法国名厨，享有“世纪名厨”的美誉。他在38岁时便为餐厅取得了米其林三颗星的至高荣誉，成为迄今为止最年轻荣获三星的天才厨师。</p><p style="text-align: justify; line-height: 2em;">香港，澳门，伦敦，纽约，巴黎，台北和东京等地都有Joël Robuchon的星星餐厅。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">Joël Robuchon餐厅在米高梅酒店（MGM Grand）理，装修非常奢华，每一处细节都无可挑剔，臻于完美；蓝色、绿色、紫色和黑色恰到好处的搭配，描绘出了精致的奢华感。</p><p style="text-align: justify; line-height: 2em;">一进门，奢华的气息就扑面而来。每一块地砖、每一盏吊灯、每一件摆设，都散发着奢华与高贵的气息。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">休息室里，红色的天鹅绒窗帘既气派又引人注目，豪华的座椅舒适度极佳。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">主厅里巨大的吊灯总能给顾客留下深刻的印象，紫色的天鹅绒沙发尽显尊贵，漂亮的摆设给这餐饭增添了许多情趣。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">餐厅里还有一个小小的单独的天台餐厅，只有寥寥几张餐桌而已，一侧的墙面上布满了绿色植物。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">就连餐具都是精心设计过的，不仅外观美观、大方，而且最奇特的是玻璃杯和菜单上丝带的颜色会随着季节的变化而改变，是不是很神奇呢？</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">菜品上，有12道式的Tasting Menu，不在意钱的小伙伴可以尝试一下这款12道菜的主厨精选套餐。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">接下来，就开吃吧！</p><p style="text-align: justify; line-height: 2em;">首先，女侍者们会推着面包车准备开饭 ，上面有牛奶面包、罗勒面包、培根面包、羊角面包、法国长面包、奶酪面包、藏红花奶油蛋糕等十几二十种不同的面包。</p><p style="text-align: justify; line-height: 2em;">这样的开场是不是很特别，很与众不同呢？你会不会有一点点小小的惊喜呢？</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">吃点面包，再来点开胃小点，就可以开心的等着上“正主”了。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">这里的菜色每一道都是色、香、味俱全，而且从主菜到甜点，都点缀着亮闪闪金灿灿的金箔，跟餐厅的装修一样奢华。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">吃完主菜之后，还有惊喜哦！</p><p style="text-align: justify; line-height: 2em;">这次将有一大波各式cheese奶酪盛宴来袭！</p><p style="text-align: justify; line-height: 2em;">So，大家前面可不要一次吃饱噢，留点空间装甜点。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">如果你以为这样吃完之后就结束了的话，那就大错特错了。</p><p style="text-align: justify; line-height: 2em;">当装满30多种小点心和巧克力的推车停在你面前的时候，你会有怎样的反应呢？</p><p style="text-align: justify; line-height: 2em;">每一样甜品不仅样子好看，味道更是惊艳，就算吃饱了也要选几样尝一尝，不然你可就要后悔咯。</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">这样一餐带给你味蕾无与伦比享受的盛宴我想任何人都是不会忘怀的！</p><p style="text-align: justify; line-height: 2em;"></p><p style="text-align: justify; line-height: 2em;">在拉斯维加斯，除了能吃到世界顶级大厨烹饪的美食，而且还可以向世界顶级大厨拜师学艺噢~是不是很赞呢？</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;">拉斯维加斯的许多餐厅都提供烹调课程，比如知名餐饮企业家Piero Selvaggio's的意大利餐厅Giorgio Caffè & Ristorante为15-40人的团体提供培训，游客们可以学习如何烹制一顿诱人的晚餐。再比如在时尚秀购物中心(Fashion Show Shopping Center)内的Café Ba Ba Reeba游客们每周六可以学习如何烹饪一顿5道菜的西班牙午餐及如何搭配酒水。</p><p style="text-align: justify; line-height: 2em;">如果你热爱美食、喜欢烹饪的话，拉斯维加斯之行一定会让你厨艺飙升，受益匪浅。</p><p style="text-align: justify; line-height: 2em;">你还在等什么？</p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;"></p><p style="text-align: justify; line-height: 2em;">之前给大家介绍的餐厅有Fine Dinning，也有Casual Dining，大家可以根据自己的喜好和资金情况随意选择。</p><p style="text-align: justify; line-height: 2em;">如果你不愿意在吃上花太多钱的话，还可以去赌场酒店里的Food Court（美食街）觅食，大约一餐只需要6美元。有Food Court的赌场酒店有：Venetian、Luxor、Monte Carlo、New York、Flamingo、Harrah’s、Riviera等。</p><p style="text-align: justify; line-height: 2em;"><span style="font-size: 14px;">PS：Buffet和Food Court都属于Casual Dining。</span></p><p style="text-align:center"></p><p style="text-align: justify; line-height: 2em;"><strong>最后，再给大家推荐几家不错的早餐餐厅：</strong></p><p style="text-align: justify; line-height: 2em;">哈希屋（Hash House）</p><p style="text-align: justify; line-height: 2em;">巴迪餐厅（Buddy V’s Ristorante）</p><p style="text-align: justify; line-height: 2em;">棕榈广场酒店（Simon at Palms Place ）</p><p style="text-align: justify; line-height: 2em;">乡间俱乐部 （Country Club ）</p><p style="text-align: justify; line-height: 2em;">弗里蒙特街丹尼餐厅（Denny’s on Fremont Street）</p><p style="text-align: justify; line-height: 2em;">……</p><section style="box-sizing: border-box; background-color: rgb(255, 255, 255);"><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><p style="margin: 10px 0% 0px; position: static; box-sizing: border-box; text-align: justify; line-height: 2em;"></p><section class="" style="display: inline-block; vertical-align: top; width: 44%; box-sizing: border-box;"><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><section class="" style="margin: 10px 0px; position: static; box-sizing: border-box;"><section class="" style="border-top-style: solid; border-top-width: 1px; border-top-color: rgb(13, 0, 21); box-sizing: border-box;"></section><section class="" style="margin: 3px 0px 0px; border-top-style: solid; border-top-width: 4px; border-top-color: rgb(13, 0, 21); box-sizing: border-box;"></section></section></section></section><section class="" style="display: inline-block; vertical-align: top; width: 12%; box-sizing: border-box;"><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><section class="" style="margin: -3px 0% 10px; text-align: center; font-size: 12.8px; position: static; box-sizing: border-box;"><section class="" style="display: inline-block; width: 2.5em; height: 2.5em; line-height: 2.5em; border-radius: 100%; margin-left: auto; margin-right: auto; font-size: 12.8px; color: rgb(255, 255, 240); box-sizing: border-box; background-color: rgb(13, 0, 21);"><section style="box-sizing: border-box;">END</section></section></section></section></section><section class="" style="display: inline-block; vertical-align: top; width: 44%; box-sizing: border-box;"><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><section class="" style="margin: 10px 0px; position: static; box-sizing: border-box;"><section class="" style="border-top-style: solid; border-top-width: 1px; border-top-color: rgb(13, 0, 21); box-sizing: border-box;"></section><section class="" style="margin: 3px 0px 0px; border-top-style: solid; border-top-width: 4px; border-top-color: rgb(13, 0, 21); box-sizing: border-box;"></section></section></section></section><p></p></section><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><p style="position: static; box-sizing: border-box; text-align: justify; line-height: 2em;"></p><section class="" style="display: inline-block; vertical-align: top; width: 24%; box-sizing: border-box;"><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><section class="" style="text-align: right; margin-top: 10px; margin-bottom: 10px; transform: translate3d(0px, 0px, 0px); position: static; box-sizing: border-box;"></section></section></section><section class="" style="display: inline-block; vertical-align: top; width: 52%; box-sizing: border-box;"><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><section class="" style="margin-top: 10px; margin-bottom: 10px; text-align: center; position: static; box-sizing: border-box;"><section class="" style="padding: 3px; display: inline-block; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(197, 197, 201); color: rgb(59, 58, 58); text-align: left; box-sizing: border-box;"><section style="box-sizing: border-box;"><span style="line-height: 1.6; box-sizing: border-box;"><br style="box-sizing: border-box;"/></span></section><p style="box-sizing: border-box;"><span style="line-height: 1.6; box-sizing: border-box;">关于拉斯维加斯的美食就介绍到这里，吃饱喝足，就开始激情满满的去玩咯~O(∩_∩)O哈哈~</span></p><p style="box-sizing: border-box;"><span style="line-height: 1.6; box-sizing: border-box;">明天见，Bye~！</span></p></section></section></section></section><section class="" style="display: inline-block; vertical-align: top; width: 24%; box-sizing: border-box;"><section class="Powered-by-XIUMI V5" style="position: static; box-sizing: border-box;"><section class="" style="margin-top: 10px; margin-bottom: 10px; transform: translate3d(0px, 0px, 0px); position: static; box-sizing: border-box;"></section></section></section><p></p></section></section><p><br/></p><p style="text-align: justify; line-height: 2em;"><strong>本文作者：红蔷薇</strong></p><p style="text-align: justify; line-height: 2em;"><strong>图片来源：网络</strong></p><p style="text-align: justify; line-height: 2em;"><strong>（本文为原创文章，转载请注明出处，谢谢！）</strong></p>
开始正题：
storyboard中
屏幕快照 2016-08-05 下午10.24.40.png
吧上面的html代码复制到一个txt文本中，放到工程路径下：
屏幕快照 2016-08-05 下午10.26.11.png
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSString * htmlStrPath = [[NSBundle mainBundle] pathForResource:@"html2.txt" ofType:nil];
NSData * htmlData = [NSData dataWithContentsOfFile:htmlStrPath];
NSString * htmlStr = [[NSString alloc]initWithData:htmlData encoding:NSUTF8StringEncoding];
[self.webView loadHTMLString:htmlStr baseURL:nil];
}
@end
现在，运行起来：
test.gif
发现一个问题 图片的宽度并不能适配手机屏幕的宽度。
解决方案：
添加一段js代码来控制image标签的宽度使其等于屏幕的100%
var images = document.getElementsByTagName('img');
for(var i = 0 ; i < images.length ; i ++){
var image = images[i].style.width='100%';
}
修改viewcontroller.m中的代码如下
- (void)viewDidLoad {
[super viewDidLoad];
NSString * htmlStrPath = [[NSBundle mainBundle] pathForResource:@"html2.txt" ofType:nil];
NSData * htmlData = [NSData dataWithContentsOfFile:htmlStrPath];
NSString * htmlStr = [[NSString alloc]initWithData:htmlData encoding:NSUTF8StringEncoding];
htmlStr = [htmlStr stringByAppendingString:@"<script>var images = document.getElementsByTagName('img');for(var i = 0 ; i < images.length ; i ++){var image = images[i].style.width='100%';}</script>"];
[self.webView loadHTMLString:htmlStr baseURL:nil];
}
运行结果：
test.gif
第二个问题：当网页中图片太多的时候我们如何实现延时加载？
在同事的帮助下，以及网上搜索的资料来看。js实现网页中图片的延时加载大概是这个思路的，首先，img的src属性中先放一个占位图地址，这个占位图是本地图片或者很小的图片，保证网页的加载速度，将真正的图片地址存放到一个临时的自定义属性中（setAttribute('key','value')）然后监听屏幕的滚动，等待网页将要显示某张图片的时候再去修改src属性（img.src=img getAttribute(key)）实现延时加载
找到了大神写好的js代码:echo.js
window.Echo = (function(window, document, undefined) {
'use strict';
var store = [], offset, throttle, poll;
var _inView = function(el) {
var coords = el.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
};
var _pollImages = function() {
for (var i = store.length; i--;) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
store.splice(i, 1);
}
}
};
var _throttle = function() {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function(obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
_throttle();
if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
}
};
return {
init: init,
render: _throttle
};
})(window, document);
附上使用方式
<script src="/Users/lh0811/Desktop/WebView/WebView/echo.js" type="text/javascript"></script>
<script>
Echo.init({
offset: 0,
throttle: 0
});
</script>
echo.js是吧图片的真是路径放到img标签的 data-echo 属性中，src中房占位图。
我们只需要把echo.js放到工程本地路径下，并引入到html中，然后在htmlStr中拼接上调用的JS方法即可。
修改viewcontroller.m中的代码实现
- (void)viewDidLoad {
[super viewDidLoad];
NSString * htmlStrPath = [[NSBundle mainBundle] pathForResource:@"html1.txt" ofType:nil];
NSData * htmlData = [NSData dataWithContentsOfFile:htmlStrPath];
//原始的HTML
NSString * htmlStr = [[NSString alloc]initWithData:htmlData encoding:NSUTF8StringEncoding];
//拼接控制图片宽度js
htmlStr = [htmlStr stringByAppendingString:@"<script>var images = document.getElementsByTagName('img');for(var i = 0 ; i < images.length ; i ++){var image = images[i].style.width='100%';}</script>"];
//拼接上调用echo的js
htmlStr = [htmlStr stringByAppendingString:@"<script src='/Users/lh0811/Desktop/WebView/WebView/echo.js' type='text/javascript'></script><script>Echo.init({offset: 0,throttle: 0});</script>"];
[self.webView loadHTMLString:htmlStr baseURL:nil];
}
网友评论