• 如何实现图片逐渐加载逐渐显示 转载


    图片站打开速度慢怎么办?空间不好有几张图片打开速度慢,怎么办?等等,对于有图片的网站打开速度慢,会导致用户不耐烦的跳出,使网站的跳出率增加,这也是网站排名迟迟上不去的原因之一。今天东东SEO博客给大家分享一个图片延迟加载技术(ImageLazyLoad技术)。

    一、ImageLazyLoad技术介绍:

    1、在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。

    2、ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

    二、图片加载技术的好处:

    图片是在下拉滚动条时加载,这是一个非常不错的用户体验,同时减少了页面加载的时间了,也减轻了服务器的压力。对网站优化有莫大的的好处。

    三、实现方法:

    1、在头部<head></head>直接添加以下三段代码:

    <script type=”text/javascript” src=”js/jquery.js”></script>
    <script type=”text/javascript” src=”js/jquery.lazyload.js”></script>

    <script type=”text/javascript”>
    var Img = “images/lazyload.gif”;
    jQuery.noConflict()(function(){jQuery.noConflict()(“img”).lazyload({placeholder:Img,effect:”fadeIn”});});
    </script>

    如图:

    图片加载技术案例

    2、把JS文件放在模板文件夹里,以及复制images文件里的lazyload.gif,粘贴到我们模板里的images文件夹里。OK完事!

        转自http://www.tangshanseo.net/590.html

    图片加载技术下载地址:http://pan.baidu.com/s/1c0thefu

    案例地址:www.0315zhuangxiu.com

  • 相关阅读:
    对于软件工程这门课程的一些心得
    第一次冲刺(10)
    第一次冲刺(7~9)
    第一次冲刺(6)
    第一次冲刺(5)
    第一次冲刺(4)
    第一次冲刺(3)
    第一次冲刺(2)
    Arrays.asList 为什么不能 add 或者 remove 而 ArrayList 可以
    Javascript保证精度的小数乘法
  • 原文地址:https://www.cnblogs.com/xuepei/p/3806368.html
Copyright © 2020-2023  润新知