图片的预加载和按需加载

作者:网络    软件教程库   2020-05-15

图片预加载

!doctype html
html
head
meta http-equiv="content-type" content="text/html; charset=utf-8"
title无标题文档/title
style
    img{width:500px;margin:100px auto;display: block;}
/style
script
window.onload = function() {
    var icur = 0;
    var i = 0;
    var oimg = document.getelementbyid(‘img1‘);

    var arr = [
            [
                ‘http://b.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c666af095f9e16fdfaaf516741.jpg‘,
                ‘http://g.hiphotos.baidu.com/image/pic/item/4a36acaf2edda3ccd2994a5402e93901213f9241.jpg‘,
                ‘http://a.hiphotos.baidu.com/image/pic/item/2fdda3cc7cd98d10b1a9fe45223fb80e7bec9041.jpg‘,
                ‘http://e.hiphotos.baidu.com/image/pic/item/96dda144ad34598216d017e60ff431adcbef8468.jpg‘,
                ‘http://d.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5a6e81a8052da81cb39db3d0e.jpg‘,
                ‘http://b.hiphotos.baidu.com/image/pic/item/14ce36d3d539b600ab94fdc3ea50352ac65cb768.jpg‘,
                ‘http://c.hiphotos.baidu.com/image/pic/item/cf1b9d16fdfaaf5179eeb78f8f5494eef01f7af4.jpg‘,
                ‘http://d.hiphotos.baidu.com/image/pic/item/8cb1cb13495409234610554e9158d109b3de4980.jpg‘,
                ‘http://d.hiphotos.baidu.com/image/pic/item/5ab5c9ea15ce36d386b6b50039f33a87e950b14b.jpg‘,
                ‘http://b.hiphotos.baidu.com/image/w%3d230/sign=84a0b54d93ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e4462c796d2c8a786c9175c1d.jpg‘],[
                ‘01‘,
                ‘02‘,
                ‘03‘,
                ‘04‘,
                ‘05‘,
                ‘06‘,
                ‘07‘,
                ‘08‘,
                ‘09‘,
                ‘10‘
            ]
    ]
;
    
    

    oimg.onclick = function() {
        i++;
        if (i  arr[0].length) {
            oimg.src = arr[0][i];
        }
    }

    preloadimg();
    function preloadimg() {
        var oimage = new image();
        oimage.src = arr[0][icur];

        oimage.onload = oimage.onerror = function() {
            icur++;
            if (icur  arr[0].length) {
                preloadimg();    //递归
            }
            document.title = icur + ‘ / ‘ + arr[0].length;
        }
    }
    
}
/script
/head

body
    img src="http://bizhi.zhuoku.com/2014/10/01/zhuoku/zhuoku001.jpg" alt="1111" id="img1"/
/body
/html

图片按需加载

!doctype html
html
head
meta http-equiv="content-type" content="text/html; charset=utf-8"
title无标题文档/title
style
#ul1 {margin: 100px auto 0; padding: 0;}
li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;}
img {width: 290px; height: 200px; display: block;}
/style
script
window.onload = function() {
    
    var oul = document.getelementbyid(‘ul1‘);
    var aimg = oul.getelementsbytagname(‘img‘);
    
    showimage();
    
    window.onscroll = showimage();
    
    function showimage() {
        
        var scrolltop  = document.documentelement.scrolltop || document.body.scrolltop;
        
        for (var i=0; iaimg.length; i++) {
            
            if ( !aimg[i].isload  gettop(aimg[i])  scrolltop + document.documentelement.clientheight ) {
                //alert(i);
                aimg[i].src = aimg[i].getattribute(‘_src‘);
                aimg[i].isload = true;
            }
            
        }
        
    }
    
    function gettop(obj) {
        var itop = 0;
        while(obj) {
            itop += obj.offsettop;
            obj = obj.offsetparent;
        }
        return itop;
    }
    
}
/script
/head

body
    ul id="ul1"
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
        liimg _src="img/1.jpg" src="img/white.jpg" //li
        liimg _src="img/2.jpg" src="img/white.jpg" //li
        liimg _src="img/3.jpg" src="img/white.jpg" //li
        liimg _src="img/4.jpg" src="img/white.jpg" //li
        liimg _src="img/5.jpg" src="img/white.jpg" //li
        liimg _src="img/6.jpg" src="img/white.jpg" //li
        liimg _src="img/7.jpg" src="img/white.jpg" //li
    /ul
/body
/html

图片的预加载和按需加载

原文地址:http://www.cnblogs.com/liujin0505/p/4471484.html

软件教程库 该篇文章地址:https://www.itjcku.com/9999/1091417.html

阅读全部内容


Tags:图片加载以及

返回首页



推荐内容

iPhone/iPad程序怎么禁止自动休眠

//禁止自动休眠可以通过这一句话搞定:[uiapplication sharedapplication].idletim ...

普林斯顿《算法II》第一周学习笔记UndirectedGraph

普林斯顿的算法课是cousera上评价挺高的一门课,课程的教学语言用的是java,课程中的算法都会被封装成类的形式,对于 ...

headFirst学习笔记之九:迭代器与组合模式(5.1)

1.任务: 大新闻!对象村餐厅和对象村煎饼屋合并了!可以在同一个地方吃早饭和午饭了hohoho(有什么好开森的对象村的小 ...

IOSapplicationWillResignActive

一、挂起当有电话进来或者锁屏,这时你的应用程会挂起,在这时,uiapplicationdelegate委托会收到通知,调 ...

哥我要向前看了

七年前的五一节前的那个周六,我遇到生命中一个重要的人。虽然相处短暂,好梦不长,但是回忆丰满,念念不忘。 七年后的五一节, ...

GoldSmith第二章

uhf:特高频 300m-3000mhz shf:超高频 3g-30g 所有发射与接收的信号都是实信号(因为调制器的振荡 ...

动态规划总结【模板】

最长递增子序列 给定一个序列,找到最长子序列的长度,使得子序列中的所有元素被排序的顺序增加。 1.求最长递增子序列的 ...

HDUACM1103Flo'sRestaurant

分析:借助stl的min_element实现。每次更新最先被占用的桌子,具体见注释。 #includelt;iostre ...

【翻译自mos文章】Oracledb12c中,每次日志切换时,会改变alert_sid.log的权限

12c中,每次日志切换时,会改变alert_sid.log的权限 来源于: alert log file‘s perm ...

poj1988(并查集)

题意:有30000个木块,编号从1到30000,然后有两种操作m a b,把木块a所在的堆块放到木块b所在的堆块上,操作 ...

org.hibernate.exception.GenericJDBCException:Couldnotopenconnection

1、错误描述 org.hibernate.exception.genericjdbcexception: could ...

ubuntu下mysql导出数据

使用的是workbench,原因时workbench的导出工具mysqldump和mysql的版本不一致,这个时候手动指 ...

怎样看懂女人哪些最直接的肢体暗示,撒娇

主动拥抱。 拥抱是最简单却十分亲密的身体接触,女人在想亲热时,会主动寻求拥抱,向伴侣靠近。如果她躺在你的怀抱中,并用语言 ...

移动后端云平台Bmob介绍

对于移动端的独立开发者来说,最痛苦的事情莫过于搭建后台服务器。没有基础的还得从头学起,有技术的又要搭建维护后台,非常 ...

WAMP配置虚拟主机

问题背景:从网上下载了一个php项目a,a项目需要部署在网站的根目录下。配置虚拟主机可以解决这个问题。1.打开apach ...

java克隆测试

1.person类 1 //clone方法必须实现cloneable接口 2 public class perso ...

C++string中用于查找的find系列函数浅析

总述:以下所讲的所有的string查找函数,都有唯一的返回类型,那就是size_type,即一个无符号整数(按打印出来的 ...

Savingoutputofagrepintoafilewithcolors

19 down vote favorite 7 i need to save the result o ...

hibernate异常之QueryException

org.hibernate.queryexception: expected positional parameter ...

Redis的Python客户端redis-py的初步使用

1. 安装 sudo pip install redis sudo pip install hiredis pa ...

《构建高性能Web站点》笔记

书名:构建高性能web站点 出版社: 电子工业出版社 isbn:9787121170935 一 绪论 等待的时间: ( ...

制作OSX10.10.3启动安装U盘

1.获得install os xyosemite.app 2.准备一个8gb的u盘,用磁盘工具抹掉,格式默认的mac o ...

域名解析URL转发

url转发 转发功能:如果您没有一台独立的服务器(也就是没有一个独立的ip地址)或者您还有一个域名b,您想访问a域名时访 ...

instancetypeVSid

英文好的直接读下面链接的文章就好了: http://stackoverflow.com/questions/897222 ...

androidapp开发感想

这几天帮学长做app的时候,照着视频学了json数据的传递,接着遇到了问题,就是httpurlconnection会 ...

常用软件及注册码

vmware-workstation-full-11.0.0-2305329.exe m50ac-j034j-08l8a ...

[POJ3420]QuadTiling

quad tiling time limit:1000ms memory limit:65536k to ...

C-关键字,标识符,注释

一.关键字:c语言中提供了有特殊含义的符号,也叫做保留字。 c语言中一个32个关键字,这些关键字都被赋予了 ...

C-基本概念

一.程序结构 1.c 程序结构:任何一个c程序都是由一个或小个程序代码块组成,每个小程序都有自己的功能,一般称这些小 ...

应该具备的能力

1. 学习能力(learning ability)   有些东西不懂很正常,从不懂到懂,从懂到精通,自己想想,原来不会的 ...


本网站部分内容来自互联网,版权归原作者所有,文章内容仅代表原作者个人观点。如有侵权请联系我们删除 电子邮件 itjcku@foxmail.com