资讯专栏INFORMATION COLUMN

js图片加载效果(延迟加载+瀑布流加载)

el09xccxy / 396人阅读

摘要:如果加载不成功,就提示图片加载错误。绿色表示已加载,白色表示未加载。假设所有的图片地址已经存在一个数据中,每次读取张图片地址,加载它们之后,插入到现有的瀑布流末尾。避免因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。

主要做了两种图片加载的效果
一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间)
另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果

一 延迟加载

主要思路:

HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background

js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background

每成功加载一张图片,进度条的百分比进行相应的变化。

如果加载不成功,就提示图片加载错误。


HTML结构很简单,就是一个div.picList包裹了所有img,然后加上一个简单的进度条div#loadBar


    

css(使用的scss,编译时会自动加上各种兼容前缀)

.picList{
    img{
        width: 100px;
        height: 100px;
        position: relative;

        /*加载失败时显示灰底文字*/
        &:after{
            content: "( ⊙ o ⊙ )加载失败";
            font-size: 6px;
            font-family: FontAwesome;
            color: rgb(100, 100, 100);
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: #ffffd;
        }
    }
}

.lazy{
    background: url(../pic/loading.gif) center no-repeat;
    border: 1px solid black;
}

#loadBar{
    width: 200px;
    height: 15px;
    background: linear-gradient(90deg,#187103,#81b50b,#187103);
    border: 10px solid white;

    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -100px;

    #loadBarMask{
        width: 70%;//这个数值显示没有加载成功的图片
        height: 100%;
        background-color: beige;
        position: absolute;
        right: 0;
    }
}

css里面需要注意的地方有两个:

一个是把图片加载错误时显示的灰底文字放在了img的after伪类中,当图片加载失败,又去掉了background的gif图片之后,就会显示这个部分的内容及样式。

一个是进度条的样式。写得很简单,主要是一层带渐变的绿色和一层白色叠在一起。绿色表示已加载,白色表示未加载。显示的时候,直接控制白色那层的宽度即可。

js部分(直接执行loadPicPerSecond()即可)

var lazyPic = $("img.lazy");
var loadBarMask = $("#loadBarMask");
var picList = $(".picList");

var activePic = 0;
var totalPic = lazyPic.length;

/*每秒加载一张图片*/

function loadPicPerSecond(){

    lazyPic.each(function(index){

        var self = $(this);

        //console.log(self[0].complete);
        /*img标签已经事先写在html中,所以此时的complete状态全部都是true*/

        setTimeout(function(){

            src[index] = self.attr("data-src");
            self.attr("src",src[index]);
            self.removeClass("lazy");

            //图片获得正确src地址之后,可以执行下面的onload操作
            self[0].onload = function(){

                //加载读条loadBar动画
                countPic();
            }

            //图片获得的src地址不正确时,执行下面的onerror操作
            self[0].onerror = function(){
                /*this.style.background = "url(pic/compressed/picList18.jpg) center no-repeat";*/
                countPic();
            }

        },1000*index);

    })

}

/*根据onload的执行情况来计算当前的图片加载进度.每onload一次,activePic就增加1*/

function countPic(){

    activePic++;

    var leftPic = totalPic - activePic;
    var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比,和loadBarMask的宽度占比配合

    console.log("已加载"+(100-percentPic)+"%");

    loadBarMask.css("width",percentPic+"%");

    if(percentPic==0){
        $("#loadBar").hide();
    }
}
二 瀑布流加载

主要思路:

监听窗口滚动情况,当已经加载的图片的最后一张快要进入窗口的时候,开始加载下面的图片。

假设所有的图片地址已经存在一个json数据中,每次读取10张图片地址,加载它们之后,插入到现有的瀑布流末尾。

如此往复,直到加载完所有图片。


HTML和前面部分相同,只是把src写成正常地址即可。
css完全一样。

js部分

var lazyPic = $("img.lazy");
var loadBarMask = $("#loadBarMask");
var picList = $(".picList");

var scrollTop,
    clientHeight,
    scrollHeight;

var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片

var src = [];

var activePic = 0;
var totalPic = lazyPic.length;

//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
    dirtSrc + "20.jpg",
    dirtSrc + "21.jpg",
    dirtSrc + "22.jpg",
    dirtSrc + "23.jpg",
    dirtSrc + "24.jpg",
    dirtSrc + "25.jpg",
    dirtSrc + "26.jpg",
    dirtSrc + "27.jpg",
    dirtSrc + "28.jpg",
    dirtSrc + "29.jpg",
    dirtSrc + "30.jpg",
    dirtSrc + "31.jpg",
    dirtSrc + "32.jpg",
    dirtSrc + "33.jpg",
    dirtSrc + "34.jpg",
    dirtSrc + "35.jpg",
    dirtSrc + "36.jpg",
    dirtSrc + "37.jpg",
    dirtSrc + "38.jpg",
    dirtSrc + "39.jpg",
    dirtSrc + "40.jpg",
    dirtSrc + "41.jpg",
    dirtSrc + "42.jpg",
    dirtSrc + "43.jpg",
    dirtSrc + "44.jpg",
    dirtSrc + "45.jpg",
    dirtSrc + "46.jpg",
    dirtSrc + "47.jpg",
    dirtSrc + "48.jpg",
    dirtSrc + "49.jpg",
]};

//加载次数计数器
var scrollIndex = 0;

$(function(){

    /*监听窗口滚动情况*/
    $(window).on("scroll",function(){

        scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
        clientHeight = $(window).height();
        scrollHeight = picList.last().height();//picList.last()[0].clientHeight

        /*目标与窗口的距离达到阈值时开始加载*/
        if(scrollHeight-clientHeight-scrollTop < threshold){
            scrollPic(10);
        }
    })
})

/*根据滚动程度加载图片,每次加载perAmount张*/

function scrollPic(perAmount = 10){

    var totalAmount = perAmount * (scrollIndex+1);

     //考虑到最后一次加载的时候,剩余的图片数量有可能达不到限定的每次加载的数量,这时候需要更改totalAmount的值
    if(totalAmount>picData.imgSrc.length){
        totalAmount = picData.imgSrc.length;
    }
    for(scrollIndex;scrollIndex

比较捉急的就是scrollTop、height那几个值的取值对象,总是记不清楚,所以按照js和jquery都写上了,以后可以直接用。将数值关系搞定之后,只要满足条件就触发加载即可。

三 后记·兼容性问题

拿到IE8之下运行时,发现img.onload后面的function打死都不执行,IE8智障到不能完成 img.onload = function(){}这么初级的代码么?
去查了资料之后,发现IE8虽然白痴,但还算没有智障到无药可救。
onload是可以调用的,但是要放在src的赋值之前。

简单来说,就是要先告诉浏览器图片加载完要怎么处理,再让它去加载图片。避免因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。而其它浏览器则是从缓冲区读取到图片时就执行onload。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50761.html

相关文章

  • js图片加载效果延迟加载+瀑布加载

    摘要:如果加载不成功,就提示图片加载错误。绿色表示已加载,白色表示未加载。假设所有的图片地址已经存在一个数据中,每次读取张图片地址,加载它们之后,插入到现有的瀑布流末尾。避免因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。 主要做了两种图片加载的效果一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间)另外一种是根据滑块的...

    tomorrowwu 评论0 收藏0
  • 原生js实现瀑布效果

    摘要:前言最近在整理基础知识,接触到了几个常用的页面特效,其中觉得用原生实现瀑布流的案例十分有趣,于是与大家分享一下。瀑布流瀑布流,又称瀑布流式布局。通过定位的方式是我们实现瀑布流的最基本的原理,只要我们动态的设置它的值值,就能让它排列。 showImg(https://segmentfault.com/img/remote/1460000012621941?w=1052&h=542); 前...

    wangdai 评论0 收藏0
  • 加载瀑布和LightBox实现图片搜索效果

    摘要:无非就是获取用户输入的获取图片信息组装填充页面数据瀑布流布局处理在页面滚动时判断最后一张图片是否可见,如果是则重复以上内容查看源码 开始 做一个小项目,算是对js和jQuery的一次练习吧。 图片资源来自这个网站(上面有很多高清图片关键还是免费下载的):https://unsplash.com/ 项目具体效果可以点这里:https://bjw1234.github.io/ima......

    rainyang 评论0 收藏0
  • 瀑布插件Masonry的配置和使用

    摘要:是最流行的瀑布流插件之一,配置简单,功能强大,在上收获了。如果你想使用瀑布流提升网站体验,将是不错的选择。瀑布流,又称瀑布流式布局。需要注意的是,如果你需要加载图片,不会在图片加载完后重新布局,这可能会影响你的布局效果,建议配合使用插件。 Masonry是最流行的瀑布流插件之一,配置简单,功能强大,在Github上收获了1w+ stars。如果你想使用瀑布流提升网站体验,Masonry...

    waterc 评论0 收藏0
  • 小程序之图片瀑布(最全实现方式,额外加送懒加载

    摘要:完整代码请戳我们回到小程序,此时接口返回的数据如下可以看到每个图片都有高度了,接下来我们实现瀑布流布局,等下,我们搞下瀑布流布局的懒加载,关于小程序的懒加载,猛戳了解更多。 效果图 来来来,看啊看,外面的世界多好看, showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果图展示的是瀑布流...

    rubyshen 评论0 收藏0

发表评论

0条评论

el09xccxy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<