优化轮播广告的加载方式，大大减少了页面的加载量

首先，将图片的路径存储在img标签的一个非src属性中，LOL首页是存储在rel属性中的，此举是避免页面直接加载图片。优化轮播广告的加载方式，然后使用JS的监听方法（IE是attachEvent，其他浏览器是addEventListener），监听页面的scroll事件。一旦页面滚动，就会执行一个编写的函数，来判断图片是否处于浏览器的当前一屏内，如果是，将rel属性内的地址赋值给src属性，如果不是，继续监听。当板块内的所有图片都被加载后，取消监听。LOL官网首页的活动板块和媒体合作板块均使用了这种技术，大大减少了页面的加载量。

简单的说，本地存储就是为网页通过客户端网页浏览器在本地存储键值对的一个方法。就像Cookie，就算你离开了网站，关闭了浏览器标签，退出浏览器等等，数据也会一直存在。与Cookie不同的是，数据绝不会向遥远的网络服务器传送（除非你使用其他方法来手动传输）。不同于提供长期本地存储的上述所有尝试，它在网页浏览器内以原生的方式执行，因此在第三方浏览器插件失效的情况下它也能有效执行。

我们对于支持HTML5的浏览器(Firefox、Chrome、Safari、Opera等)，使用HTML5的localStorage提供的方法；对于IE浏览器，使用IE提供的userData方法；对于其他浏览器使用常规方法加载内容。

userData是IE提供的一个本地存储方法，他将需要存储的内容放置在本地的一个XML文件中，并在页面的一个元素中设置一个调用的锚点。具体使用方法为：使用getElementById获取页面内的一个元素，使用addBehavior(“#default#userData”)对其添加本地存储的行为；使用setAttribute将需要存储的内容对其进行赋值，并用save(“XXX”)方法将内容存储在名为XXX的XML文件中；使用load(“XXX”)方法加载本地的XXX.xml文件，并用getAttribute获取已经存储的内容。

其实这是很多大型网站都使用了的方法，比如淘宝、拍拍等等。这次在游戏官网里做一个尝试，效果不错，初期为首页节省了几十K的下载量，因为不同显示器分辨率不同，所以第一屏高度不一样，这个数据有所浮动。

文章题目：优化轮播广告的加载方式，大大减少了页面的加载量
转载源于：https://www.cdcxhl.com/news/169027.html

成都网站建设公司_创新互联，为您提供网站收录、关键词优化、品牌网站设计、移动网站建设、网站设计公司、网站改版

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联