基于JS图片加载从模糊到清晰代码

PHPABC JavaScript 1,186 次浏览 没有评论

分享一款基于js图片加载从模糊到清晰代码。这是一款运用了图片预加载特性,先放一张小图占位,然后判断大图是否加载完毕,加载完毕后就用大图的src替换占位图的src,注:测试时请将网速设置低一些。效果图如下:


实现代码:

 <img src="http://www.phpabc.cn/uploads/2015/03/small.jpg" name="myImage" width="1002" height="754" id="myImage"
        alt="站长素材 sc.chinaz.com" />
    <script language="JavaScript" type="text/javascript">
        var img = new Image();
        img.src = "images/mm.jpg";
        img.onload = function () {
            document.getElementById('myImage').src = this.src;
        }
    </script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go