科帮网-Java论坛、Java社区、JavaWeb毕业设计

登录/注册
您现在的位置:论坛 资料库 前端开发 > 如何实现背景图延迟加载
总共47924条微博

动态微博

查看: 1114|回复: 0

如何实现背景图延迟加载

[复制链接]
admin    

1236

主题

544

听众

1万

金钱

管理员

  • TA的每日心情

    2020-7-7 21:34
  • 签到天数: 33 天

    [LV.5]常住居民I

    管理员

    发表于 2015-12-04 13:21:12 |显示全部楼层
    图片延迟加载技术目前已经被各种网站广泛的使用,为什么要使用背景图延迟加载技术?下面我们就来说一说这个问题。

    之所以使用图片延迟加载技术,是为了避免浪费带宽。有些页面上嵌入了很多图片,但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时,正常情况下,这30多种图片会全部一次性从服务器加载到客户端,就造成的服务器的压力,也给用户的浏览器造成压力,而且,也许用户之看了前几张图片就退出去了,那其它图片的加载就是浪费。

    而使用图片延迟加载技术时,随着用户向下滚动页面,只有当图片滚动到可视视窗内,或接近可视视窗时,这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。

    目前最流行的图片延迟加载技术是使用Lazy Load Plugin for jQuery,它是一个非常轻量级的jQuery插件,只有2k多的体积。使用方法也非常简单,只需要在图片上这样写:
    1. <img class="lazy lazy " data-original="img/example.jpg"
    2. width="640" height="480">
    复制代码

    然后用一段js
    1. $(function() {
    2.     $("img.lazy").lazyload();
    3. });
    复制代码
    这样,这个图片就会只有当需要加载时才会加载。

    大多数人使用Lazy Load Plugin for jQuery,是用于image加载,但其实它还有一个很重要的功能,就是背景图延迟加载。背景图延迟加载的用法和图片延时加载的用法很相似,首先,你需要使用背景的元素需要这样写:
    1. <div class="lazy lazy " data-original="img/example.jpg"
    2. width="640" height="480"></div>
    复制代码
    然后用一段js
    1. $(function() {
    2.     $("div.lazy").lazyload();
    3. });
    复制代码
    这样,只有当这个div出现在可视视窗内时,背景图才会加载显示。


    使用背景图延时加载有什么好处?


    首先上面已经说了,可以避免不必要的资源浪费,页面下部可视视窗外的很多元素也许用户根本不会去查看,所以它们的背景图也不必加载,只有当用户看到它们时,才去加载。


    第二个好处就是减少机器人抓取网站时给服务造成的压力。有很多网页爬虫会频繁的访问你的网站,它们不管遇到什么资源都会抓取回去,页面上的图片它们最感兴趣,往往图片是最占流量的。如果将图片换成背景图,这些爬虫就无法识别,抓取不到这些图片,减少了服务器的压力。

    参数说明:



    placeholder : "img/grey.gif",     //用图片提前占位
    effect : "fadeIn",    //载入使用何种效果,effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
    threshold : 200,    //提前开始加载
    event : "click",      //事件触发时才加载,event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标划过或点击图片才开始加载,后两个值未测试…
    failurelimit : 10,     //图片排序混乱时 ,
    failurelimit,值为数字.
    jquery.lazyload.zip (1.42 KB, 下载次数: 3)

    科帮网-Java论坛、Java社区、JavaWeb毕业设计 1、本主题所有言论和图片纯属会员个人意见,与本社区立场无关
    2、本站所有主题由该帖子作者发表,该帖子作者与科帮网-Java论坛、Java社区、JavaWeb毕业设计享有帖子相关版权
    3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和科帮网-Java论坛、Java社区、JavaWeb毕业设计的同意
    4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
    5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
    6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
    7、科帮网-Java论坛、Java社区、JavaWeb毕业设计管理员和版主有权不事先通知发贴者而删除本文


    JAVA爱好者①群:JAVA爱好者① JAVA爱好者②群:JAVA爱好者② JAVA爱好者③ : JAVA爱好者③

    快速回复
    您需要登录后才可以回帖 登录 | 立即注册

       

    发布主题 快速回复 返回列表 联系我们 官方QQ群 科帮网手机客户端
    快速回复 返回顶部 返回列表