关闭

网页中图片预加载的原理

标签: javascript预加载
5990人阅读 评论(0) 收藏 举报
分类:

其实我并不清楚图片预加载的原理,只是一些猜测。

网上介绍的图片预加载,基本上都在说javascript中应该怎么样怎么样,new一个Image()对象。

但是,老大,预加载的目的,归根到底,还是要将这个图片显示出来。你javascript里面的这个Image对象,要怎么样才能让网页的img标签显示出来呢?

没说,好像都没说。

在HTML标签IMG里,src属性可以指向一个web服务,这是人所共知的。问题是,它能指向js的那个Image对象吗?未闻也。
从网上一些示例看,我猜是这样的:

javascript代码:

var img = new Image();
img.src = "图片路径";//将图片加载到JS对象img里

html:

<!-- html里的img标签,其src与js的Image对象一致,图片的预加载就能派上用场! -->
<img id="img1" src="图片路径,与js的Image对象的src一致" alt="左直拳艳照门" />

就是这样,首先在JS里面进行预加载,然后html里的img就能自然而然地用上了这个预加载!

如果真的是这样的话,控制这一切的,是浏览器,它统一协调了JS和HTML。

利用JS对图片进行加载,有时会比较方便,比如设置图片加载完毕以后,触发一些啥东东;或通过Image对象,获得图片的width、height属性,等等。

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {//如果有缓存
        //接下来可以使用图片了
        //do something here
    }
    else {
        img.onload = function() {
            img.onload = null;
            //接下来可以使用图片了
            //do something here
        };
    }
}
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

图片预加载与图片懒加载(缓载)的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一、什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前...
  • alex8046
  • alex8046
  • 2015-12-23 16:43
  • 6575

Javascript图片预加载详解

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布...
  • yisuowushinian
  • yisuowushinian
  • 2015-05-29 11:01
  • 31089

实现图片预加载的几种方式

感觉自己好久没有写博客了,可能自己变懒了。不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西。新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看,...
  • baidu_24024601
  • baidu_24024601
  • 2017-07-26 23:35
  • 2367

web前端图片懒加载实现原理

一、html(这里只列出相关的结构,body那些就不列了~) ul> li>1li> li>2li> li>3li> li>4li> li>5li> ul> ...
  • daimomo000
  • daimomo000
  • 2017-06-25 23:34
  • 3850

js预加载/延迟加载

js预加载/延迟加载  博客分类:  · javascript 浏览器面试Chrome腾讯jQuery  在面试中问道了问题,虽然也看过相关资料,但是还是需要增强和梳理下,这些方式出现的需求和...
  • u012125579
  • u012125579
  • 2015-08-01 16:58
  • 943

Glide加载图片原理----转载

Glide是谷歌为我们介绍了一个图片加载库,作者是bumptech。这个库被广泛的运用在google的开源项目中,包括2014年google I/O大会上发布的官方app。 它的使用比较方便。需要V4...
  • ss8860524
  • ss8860524
  • 2016-02-15 16:10
  • 6667

图片懒加载(滚动加载)原理

一、什么是图片懒加载? 即在页面载入的时候将页面上的img标签的src指向一个小图片,把真实地址存放在一个自定义属性中,这里我用data-src来存放,如下。 img src="loading....
  • lyyo_cd
  • lyyo_cd
  • 2017-06-15 18:35
  • 409

web前端图片懒加载实现原理(一)

前端时间面试的时候老是被问到图片懒加载实现及原理,由于自己在实际项目中并没有用过,只是了解过大概,所以回答起来都不尽如人意,趁这段时间空闲下来有时间好好研究下,话不多说,直奔主题~一、html(这里只...
  • qq_18851347
  • qq_18851347
  • 2017-06-14 13:57
  • 4034

WPF之Uri加载图片

 WPF引入了统一资源标识Uri(Unified Resource Identifier)来标识和访问资源。其中较为常见的情况是用Uri加载图像。Uri表达式的一般形式为:协议+授权+路径  ...
  • huyu107
  • huyu107
  • 2015-04-22 11:02
  • 1804

WPF 异步加载图片

最近,在做一个WPF项目。项目中有一个需求,就是以列表的方式显示出项目图片。这些图片有的存在于互联网上,有的存在于本地磁盘。存在本地磁盘的文件好说,主要是存在于网络的图片。因为存在于网络的图片,在载入...
  • ht_zhaoliubin
  • ht_zhaoliubin
  • 2015-05-04 16:05
  • 1589
    个人资料
    • 访问:2458565次
    • 积分:33424
    • 等级:
    • 排名:第161名
    • 原创:910篇
    • 转载:0篇
    • 译文:0篇
    • 评论:626条
    文章分类
    最新评论