【学习笔记】图片异步加载

 

在做重构的时候，经常会做一些以图片为主的页面，背景啊，或者某些元素都是比较高分辨率的大图，这样加载起来就会很浪费时间，尤其是背景的大图，如果直接加载的话会逐行显示，体验会很不好。

于是我想到了能否在开始的时候预加载一张低分辨率的图片，然后等原图加载完毕后进行替换，这时候onload和complete就出现在我脑海里了，代码如下

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片异步加载测试</title>
</head>

<body onload="displayImage();">
    <!--预加载的为低分辨率图片-->
    <img src="audio-bg-t.jpg" alt="" width="1440" height="900" id="image">
</body>
</html>
<script type="text/javascript">
    function displayImage() {

        var url = "audio-bg.jpg";
        var img = new Image();
        img.src = url;

        //判断图片是否缓存
        if(img.complete) {
            document.getElementById("image").src = url;
        } else {
            //没有缓存则下载图片
            img.onload = function() {
                document.getElementById("image").src = url;
            }
        }
    }
</script>

 

代码很简单就不逐一说明，这段代码只是一个原型，由此可以进一步的做一些开发，比如说如果图片很多的话，可以通过这个方法做一个loading效果。

jQuery中有个load事件，也可以实现同样的效果，于是我利用jQuery重写了代码，如下

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片异步加载测试</title>
</head>

<body onload="displayImage();">
    <!--预加载的为低分辨率图片-->
    <img src="audio-bg-t.jpg" alt="" width="1440" height="900" id="image">
</body>
</html>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    function displayImage() {

        var url = "audio-bg.jpg";
        var img = new Image();
        img.src = url;

        //判断图片是否缓存
        if( img.complete) {
            document.getElementById("image").src = url;
        } else {
            //没有缓存则下载图片
            $('#image').load(function() {
                document.getElementById("image").src = url;
            });
        }
    }
</script>

 

但是运行以后却发现，图片并没有替换，很奇怪，于是百度之，发现了问题所在

 

1.3版的说明  

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。。

 

我们的执行函数displayImage()的触发是写在body的onload事件里面，也就是页面所有元素都已经加载完了，所以load函数永远不会触发。

正确的写法应该是

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片异步加载测试</title>
</head>

<body>
    <!--预加载的为低分辨率图片-->
    <img src="audio-bg-t.jpg" alt="" width="1440" height="900" id="image">
</body>
</html>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    displayImage();
    
    function displayImage() {

        var url = "audio-bg.jpg";
        var img = new Image();
        img.src = url;

        //判断图片是否缓存
        if(img.complete) {
            document.getElementById("image").src = url;
        } else {
            //没有缓存则下载图片
            $('#image').load(function() {
                document.getElementById("image").src = url;
            });
        }
    }
</script>

 

这样就能正确的执行load事件了

posted @ 2014-07-03 11:50  Dangolol  阅读(325)  评论(0)  编辑  收藏  举报