<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com">

<meta name="copyright" content="智能社 - zhinengshe.com">

<title>智能社 - www.zhinengshe.com</title>

<style>

* { margin:; padding:; }

li { float:left; width:310px; height:310px; border:1px solid red; list-style:none; margin:5px; }

</style>

<script>

window.onload=window.onresize=window.onscroll=function (){

    var aImg=document.getElementsByTagName('img');

    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

    var scrollBottom=document.documentElement.clientHeight+scrollTop;//可是区域高度+滚动高度

    for (var i=; i<aImg.length; i++)

    {

        var top=getPos(aImg[i]).top;

        if (top<scrollBottom)

        {

            // 图片在可视区内

            aImg[i].src=aImg[i].getAttribute('_src');

        }

    }

};

function getPos(obj){

    var l= ;

    var t= ;

    while(obj){

        l += obj.offseLeft;

        t += obj.offsetTop;

        obj = obj.offseParent;

    }

    return {left:l,top:t};

}

</script>

</head>

<body>

    <ul>

        <li><img _src="data:images/m1.jpg" /></li>

        <li><img _src="data:images/m2.jpg" /></li>

        <li><img _src="data:images/m3.jpg" /></li>

        <li><img _src="data:images/m4.jpg" /></li>

        <li><img _src="data:images/m5.jpg" /></li>

        <li><img _src="data:images/m6.jpg" /></li>

        <li><img _src="data:images/m7.jpg" /></li>

        <li><img _src="data:images/m8.jpg" /></li>

        <li><img _src="data:images/m9.jpg" /></li>

        <li><img _src="data:images/m10.jpg" /></li>

    </ul>

</body>

</html>

js 图片延时加载的更多相关文章

  1. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  2. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  3. picLazyLoad 图片延时加载，包含背景图片

    /** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...

  4. js图片实时加载

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所 ...

  5. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  6. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

  7. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  8. js实现图片延时加载的原理

    实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: < ...

  9. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

随机推荐

  1. 分布式系统的唯一id生成算法你了解吗？

    在分库分表之后你必然要面对的一个问题,就是id咋生成? 因为要是一个表分成多个表之后,每个表的id都是从1开始累加自增长,那肯定不对啊. 举个例子,你的订单表拆分为了1024张订单表,每个表的id都从 ...

  2. IntelliJ IDEA平台下JNI编程（五）—本地C代码创建Java对象及引用

    本文学习如何在C代码中创建Java对象和对象数组,前面我们学习了C代码中访问Java对象的属性和方法,其实在创建对象时本质上也就是调用构造函数,因此本文知识学习起来也很轻松.有了前面学习数组创建的方法 ...

  3. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  4. LeetCode--008--字符串转换整数 (atoi)(java)

    请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之 ...

  5. Vue-router中的导航钩子

    vue-router中的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消.(路由守卫) 原文指路:https://blog.csdn.net/weixin_41399785/article/det ...

  6. php字符串的拆分截取

    /* * strstr区分大小写 * stristr不区分大小写 * */ $str="test/abc.jpg"; echo stristr($str,'.'); echo '& ...

  7. vue element upload图片 回显问题

      beforeUpload (file) { var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); ...

  8. python-day75--django项目问题详细

    1.项目名要小写 2.表中字段 AutoField()   表示整形字段,建表时不用写,当整形的数字范围不够你用的时候, 你可以用 BigAutoField()字段, 表示长整形    当表内新增有关 ...

  9. php 字符编码转换

    <?php/** * Created by PhpStorm. * User: yxp * Date: 2016/11/8 * Time: 16:47 */ /** * 将非GBK字符集的编码转 ...

  10. 数据结构与算法之PHP查找算法（二分查找）

    二分查找又称折半查找,只对有序的数组有效. 优点是比较次数少,查找速度快,平均性能好,占用系统内存较少: 缺点是要求待查表为有序表,且插入删除困难. 因此,折半查找方法适用于不经常变动而查找频繁的有序 ...