原生JS 实现图片延迟加载

当打开页面,在页面上有很多图片需要加载的情况下,为了不拖网页性能,我们完全可以使用JS延迟加载这些图片,甚至做到按需加载,这里说一下实现思路,可以事先在img标签上,增加一个属性data-url,如<img data-url="真实图片地址" src="默认图片地址" />,通过js获取首屏的高度,这部分img默认优先加载,后续通过滚动条的滚动区域来获取即将加载的img标签,找到这些img标签后,把src属性值替换为data-url的值,巧妙的做到img标签延迟加载图片。以下提供一个demo,你也可以把它封装成小插件,直接引用到你的项目中,来体验一下,是不是很炫呢,不依赖任何的其他js插件哦。

<!doctype html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过原生js延迟加载图片</title>
<style type="text/css">
        div{width:100px;height:100px;background:#F00;margin-bottom:30px}
</style>
</head>
<body>
    <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/001.png
    " src="a.gif" /></div>
    <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/002.png
    " src="a.gif" /></div>
    <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/003.png
    " src="a.gif" /></div>
    <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/004.png
    " src="a.gif" /></div>
</body>
//以上图片测试时可用复制多点

<script type="text/javascript">
        (function(){
                //common
                function tagName(tagName){
                        return document.getElementsByTagName(tagName);
                }
                function $(id){
                        return document.getElementById(id);
                }
                function addEvent(obj,type,func){
                        if(obj.addEventListener){
                                obj.addEventListener(type,func,false);        
                        }else if(obj.attachEvent){
                                obj.attachEvent(‘on‘+type,func);
                        }
                }
                
                //这里可以按照需要配置些参数
                var v={
                        eleGroup:null,
                        eleTop:null,
                        eleHeight:null,
                        screenHeight:null,
                        visibleHeight:null,
                        scrollHeight:null,
                        scrolloverHeight:null,
                        limitHeight:null
                }
                
                //对数据进行初始化
                function init(element){
                        v.eleGroup=tagName(element)
                        screenHeight=document.documentElement.clientHeight;
                        scrolloverHeight=document.body.scrollTop;
                        for(var i=0,j=v.eleGroup.length;i<j;i++){
                                if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute(‘data-url‘)){
                                        v.eleGroup[i].setAttribute(‘src‘,v.eleGroup[i].getAttribute(‘data-url‘));
                                        v.eleGroup[i].removeAttribute(‘data-url‘)
                                }        
                        }
                        
                }
                function lazyLoad(){
                        if(document.body.scrollTop == 0){
                                limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;
                        }else{
                                limitHeight=document.body.scrollTop+document.documentElement.clientHeight;
                        }
                        for(var i=0,j=v.eleGroup.length;i<j;i++){
                                if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute(‘data-url‘)){
                                        v.eleGroup[i].src=v.eleGroup[i].getAttribute(‘data-url‘);
                                        v.eleGroup[i].removeAttribute(‘data-url‘)
                                }        
                        }
                }
                init(‘img‘)
                addEvent(window,‘scroll‘,lazyLoad);
        })()                 
</script>
</html>

时间: 2024-10-04 16:17:16

原生JS 实现图片延迟加载的相关文章

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

原生JS实现图片放大镜插件

  前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的    ↓ 看完效果,大家有思路了吗,没有的话,我们一起来看一下是如何实现的~ 1实现思路 ① 要实现指上后放大的效果,需要做三个div,一个用来放原图,另一个用来放放大效果的div,最后一个是鼠标指上后需要放大部分的div(这个div我们用p标签来代替). ② 确定放大比例,最重要的一点,鼠标指上的

原生js解决图片点击左右切换(简单轮播图)

想写一个综合性的小案例,主要会运用到数组和判断以及我前面几篇博客所复习到的js的知识.今天案例想要实现的效果图如下图所示: 效果是:点击"循环切换"按钮,那么"一号"位置的文案就要写入"图片可以循环",而下面的左右箭头在点击过程中可以循环点击,并且"二号"和"三号"要响应切换到相对应的数字和文字内容:否则,点击"顺序切换"按钮,那么"一号"位置的文案就要写入"

Jquery.LazyLoad.js实现图片延迟加载功能

从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

原生js实现图片网格式渐显、渐隐效果

写正文前先吐槽一下:端午放假完第一天去某千人以上公司面试前端工程师,第一轮是我应聘职位的部门小领导,谈的不错,面试主要围绕要用到的技术来:第二轮来了我要说的正主,我了个去,问的问题一个和前端无关,问我什么是"死锁",实现二叉树的先序遍历的算法,我真的想知道我面试的是前端么,职责不是用React框架实现公司官网的维护和迭代么.我不否认他问的这些知识点属于某一领域内的基础,但是我哪个前端工程师非必要的情况下在工作2,3年内专门去了解这些工作中几乎用不到的知识呢.我前端都学不完,没学透呢.

基于原生js的图片轮播效果简单实现

基本效果如下: 实现了三张图片自动轮播+按键点击切换的效果. 基本思想: 图片轮播的效果和老式电影院的胶片放映形式很相似,在老式的电影院放映中,使用长长的胶片记录影片,胶片上是按顺序排列的一系列图片,通过快速通过放映机放映口,使这些图片产生一个连贯的切换效果,形成了动态的影片.所以,这里图片轮播的形式也可以采用这种方式来形成动画效果. 形式如下图: (黑框即我们的最外层的容器,充当放映机的存在:绿框就是胶片,上面搭载着很多的图片:粉框内即我们要轮播的图片) 从上图出发,我们要做到图片轮播,那么只

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Carousel figure</title> 5 <meta charset="utf-8"> 6 <!-- 浏览器标签页显示图标 --> 7 <lin

原生js实现图片抖动效果

今天来写一个关于图片抖动的效果,需求是:点击图片,让其抖动几下停止(类似于苹果手机填错密码之后会抖一下的效果),其实想要实现这个效果,原理就是,点击之后,让其左移动下然后右移动一下(每移动一下减几像素知道减到0),然后将其放入定时器内,让其慢慢自动停下来.来看代码布局: <style> #img{position:absolute;left:30px;} </style> <body> <!--需求:点击图片,图片会抖动几下--> <img id=&q