iframe框架和雪碧图

时间:2024-03-24 20:12:26

一、iframe标签——在当前页面显示多个网页

     1、iframe元素会创建包含另外一个文档的内联框架。
     2、iframe的属性:

          滚动条scolling="yes/no/auto"

          frameBoder="0(无)/1(默认)/正整数"

          src=“相对地址”

          width/height一个iframe元素的大小

          name=“a标签的target值”//为了跳转

    3、举例

         iframe框架和雪碧图

            iframe框架和雪碧图

4、iframe的优缺点

  优点

        解决加载缓慢的第三方内容图标和广告等的加载问题。

        iframe无刷新新文件上传。

        iframe跨域通信

   缺点

           iframe会阻塞主页面的onload事件。

           无法被一些搜索引擎索引到。

           页面会增加服务器的http请求。

            会产生很多页面,不容易管理。

          

二、雪碧图(sprites)

   1、雪碧图原理

        首先,把网页中的一些背景图(多个小图标)整合到一张大图片文件中;//只有背景图才可以

        再利用background-image、background-position属性对大图定位。

   2、举例

     如,淘宝首页,侧边栏的小图标,就是用雪碧图展示的。

  3、雪碧图的优点

      很好的减少了网页的http请求次数,从而加快页面加载速度,防止加载图片时出现的空白问题。(主要特点)

      通过整合, 能减少图片的字节。

      解决了命名的困难,只需要对这张大图命名。


以上是我的小小总结,如有不对的点,望大家指正!!!!


    

相关文章