关于图片延迟加载或者懒加载的说法

MasonEast 发布于2019-08-21 10:21 / 380人阅读

var img = new image();
    img.src = "小图占位.jpg";   //加载载占位的，和html在同一文件夹下，实际也要onlaod加载，本地加载速度快一点
    img.onload = function(){
      document.querySelector("body").appendChild(img);
    }
var img_r = new image();//这个东西可以放到默认图片加载的onload里
    img_r.src = "大图真实.jpg"; //下载真实的，远程服务器请求
    img_r.onload = function(){
        img.src = img_r.src     //下载完后，替换占位
    }

1，第一种方法，小图占位
2，第二种方法，容器背景图占位，img下载后放到容器里，遮住容器背景图

注释：服务器的图片在src之后就开始下载了，但是只有当图片onload(也就是图片下载完成)后往body里添加才会直接显示出来。。

$("#main_scroll").empty().html(data);
    var imgs = document.querySelectorAll("img");
    var img_arry = [];
    for(var i = 0 ;i < imgs.length; i++){
        img_arry[i] = imgs[i].src;
        imgs[i].style.height = SW+"px";
        imgs[i].style.width = SW+"px";
        (function(index){
            imgs[index].src = "img/defalut.png";
            imgs[index].onload = function(){
                var temp_img = new Image();
                temp_img.src = img_arry[index];
                var height = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalHeight;
                var width = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalWidth;
                imgs[index].src = temp_img.src;
                imgs[index].style.height = height+"px";
                imgs[index].style.width = width+"px";
            }
            imgs[index].onerror = function(){
                console.log("默认图片加载出错了"+index)
            }
        })(i)
    };

GPU云服务器云服务器 js实现数据的懒加载图片 js图片懒加载延迟加载图片懒加载

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

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

原生实现img-lazyLoad:图片延迟加载（基于intersection Observer）

摘要：接下来，我们需要利用对这些暂时看不见的图片元素进行观察，当确认他们滚动到了窗体的可视区域时，我们在回调函数中对其进行加载。创建一个，配置元素和回调函数触发机制，这里我们将这个设为。点击查看视频教程哦！！！！ intersection Observer简介点击查阅MDN关于此api的使用说明这个api是用来检测dom元素交集的，常见的应用场景之一就是本文提到的对图片进行懒加载，即：...

shuibo 2019-08-23 15:05 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

Hanks10100 2019-08-20 14:39 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

novo 2019-08-01 16:25 评论0 收藏0
图像延迟加载 && 列表图顺序加载

摘要：此外，跟踪尚未延迟加载的元素数量，以及取消绑定滚动事件处理程序的繁琐工作将由开发者来完成。图像延迟加载列表图顺序加载的组件已经开源啦有兴趣的同学可以查看使用起来非常简单图片延时加载十分重要，尤其是对于移动端用户。从理论上来看，图像延迟加载机制十分简单，但实际上却有很多需要注意的细节。此外，有多个不同的用例均受益于延迟加载。首先，我们来了解一下在 HTML 中延迟加载内联图像。延迟加载...

ghnor 2019-05-23 17:33 评论0 收藏0