网页中图片预加载的原理

原创 2015年07月08日 16:45:21

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

网上介绍的图片预加载,基本上都在说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
        };
    }
}
版权声明:本文为博主原屙文章,喜欢你就担走。 举报

相关文章推荐

android系统资源预加载和缓存原理分析

一、系统资源预加载    android系统资源加载分两种方式,预加载和在使用进程中加载。      预加载是在zygote进程启动的时候被执行,一般系统中多应用共享的资源会被列为预加载资源,预加载...

实现图片预加载的三大方法

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

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

图片预加载与懒加载

一、预加载 前面做了个招聘页面,里面有大量的图片需要加载。 一开始都是全部写在页面中,在测试环境还看不出很慢,一放到正式环境就不对了。 微信浏览器本来就觉得慢,现在一下子要加载这么多图片,一下子...

图片预加载三大方法

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

load预加载简单实现

很久没写博客了 昨天在写页面的时候 突然想起一个页面预加载的东西 试试,刚好有朋友经常接触微信活动页面  就聊了一下思路。 页面资源加载就是三个 图片 CSS JS 现在最方便的就是判断图片加载完毕来...

图片预加载

本文结合CSS3、jquery、实现图片预加载,并将预加载的javascript代码封装为了插件。

移动端适配rem

相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布...

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

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

Html+CSS+JavaScript学习

1.基础标签注意 2.常用组合注意 3.css中的动态效果 4.javascript常用 5.Jquery常用 6.特效 1.基础banner图 2.百叶窗banner图 3.手风琴b...

图片预加载与图片懒加载

图片预加载与图片懒加载 图片预加载 图片预加载主要是针对非icon类图片。 加载快,有良好的用户体验。 提前加载图片,当用户需要查看时可直接从本地缓存中渲染、可能因为图片很大,浏览器显示出它会...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)