zoukankan      html  css  js  c++  java
  • 网页中图片预加载的原理

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

    网上介绍的图片预加载,基本上都在说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
            };
        }
    }

    版权声明:本文为博主原屙文章,喜欢你就担走。

  • 相关阅读:
    互斥锁
    信号量、互斥体和自旋锁
    【设计模式】template method(模板方法)-- 类行为型模式5.10
    C/C++中的auto关键词
    【设计模式】observer(观察者)-- 对象行为型模式5.7
    UML图
    MapReduce阅读
    shell提取文件后缀名,并判断其是否为特定字符串
    shell编程--遍历目录下的文件
    Linux shell字符串截取与拼接
  • 原文地址:https://www.cnblogs.com/leftfist/p/4764228.html
Copyright © 2011-2022 走看看