IT入门 > 面试题 > webpack与工程化 > webpack >

IT入门 > 面试题 > webpack与工程化 > webpack >

53. 页面大量图片,如何优化加载,优化用户体验

  你会看到这个提示,那是因为你的系统无法识别某栏目的模型信息,或者你新建模型后,没为这个模型设计单独的模板。不同模型的文档浏览页的模板为:article_模型名字标识.htm 如“article_article.htm”,更多的信息你可以在频道模型管理的地方查看。
附加标题 内容:
模板调用标记:
题型:1单选,2多选,3填空,4问答,5排序 内容:
模板调用标记:
4
选项A 内容:
模板调用标记:
选项B 内容:
模板调用标记:
选项C 内容:
模板调用标记:
选项D 内容:
模板调用标记:
答案 内容:
模板调用标记:

图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。

如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。

如果图片为 css 图片,可以使用 CSSsprite,SVGsprite,Iconfont、Base64 等技术。

如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。

解析:参考

难度:1入门级,2初级,3中级,4高级 内容:
模板调用标记:
1,2,3,4
专业分类 内容:
模板调用标记:
(责任编辑:admin)
    广告位API接口通信错误,查看德得广告获取帮助