转载

最新推荐文章于 2022-11-26 12:14:44 发布

我不够好i

最新推荐文章于 2022-11-26 12:14:44 发布

阅读量357

点赞数

所谓的“图片预加载”就是先加载一张不清晰的图片，然后加载一张高清图片，实现由模糊到清晰的渐变。防止页面空白影响用户体验。具体效果请看在线演示。

原理其实很简单，使用两张图片实现：一张小的缩略图，一张大的高清图，将缩略图拉大到高清图的尺寸（这就是模糊的效果），然后加载高清图片，加载完成修改<img>标签的src。

html代码如下：


  
  <img src="img_s.jpg" style="width: 409px; height: 307px;" />

js代码如下：

 
 var img = new Image();
$(img).load(function () {
    $('img').attr('src', 'img.jpg');
});
img.src = 'img.jpg';

上面是核心代码。至于进度条等代码，可以右键查看在线演示的源代码。

 
 * 带滚动条的图片预加载效果
 

 
 * =======================================
 

 
 * @author keenwon
 

 
 * Full source at http://keenwon.com
 

*/

07

 
(function () {
 

 
    var timing = function () {
 

 
        this._timer = null;
 

 
        this._percent = 0;
 

 
        this._isLoading = false;
 

 
        this._isPause = false;
 

 
        this._step = 2;
 

};

16

 
    timing.prototype = {
 

 
        start: function (url, obj) {
 

 
            var self = this;
 

 
            self._percent = 0;
 

21

 
            self._loadImg(url);
 

23

 
            self._timer = setInterval(function () {
 

 
                self._judge(url, obj);
 

 
                self._scroll();
 

 
            }, 30);
 

},

 
        _pause: function () {
 

 
            this._isPause = true;
 

 
            this._step = 0;
 

},

 
        _restart: function () {
 

 
            this._isPause = false;
 

 
            this._step = 3;
 

},

 
        _scroll: function () {
 

 
            $('.loading-progress').width(this._percent + "%");
 

 
            this._percent += this._step;
 

},

 
        _loadImg: function (url) {
 

 
            var self = this;
 

 
            var img = new Image();
 

 
            $(img).load(function () {
 

 
                setTimeout(function () {//模拟加载
 

 
                    self._isLoading = true;
 

 
                }, 2000);
 

});

 
            img.src = url;
 

},

 
        _judge: function (url, obj) {
 

 
            if (this._percent >= 70 && !this._isLoading) {
 

 
                this._pause();
 

}

 
            if (this._percent >= 70 && this._isLoading && this._isPause) {
 

 
                this._restart();
 

}

 
            if (this._percent >= 100) {
 

 
                obj.attr("src", url);
 

 
                this.destroy();
 

}

},

 
        destroy: function () {
 

 
            this._percent = 0;
 

 
            clearInterval(this._timer);
 

 
            $('.loading').hide();
 

}

}

69

 
    if (typeof window.timing == 'undefined' || window.timing == null) {
 

 
        window.timing = new timing();
 

}

 
})();
 

74

 
$(function () {
 

 
    timing.start('../img/load-image.jpg', $("img").eq(0));
 

});

voicewo 是一个专门用于在网页中实现语音识别转换的jQuery插件。开发人员可以用voicewo将用户的语音转换成文字，插入到指定的HTML表单里，无缝地与Java、.NET、PHP、ASP等多种编程语言集成。适合在聊天室、评论框、论坛、博客、电子邮件等互联网应用中使用。

项目地址1：http://www.yyblog.cn/category/project/voicewo
项目地址2：http://www.oschina.net/p/voicewo

标签： voicewo

代码

[代码][HTML]代码跳至 [1] [全屏预览]

 
<!DOCTYPE html>
 
<html>
 
<head>
 
<title>Voicewo jQuery Plugin Demo</title>
 
<link rel="stylesheet" type="text/css" href="voicewo.css">
 
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
 
<script src="jquery.voicewo.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
   $('#btn').voicewo({
 
      'width'        : 92,
 
      'height'       : 25,
 
      'outputId'     : 'txt',
 
      'buttonImage'  : 'btn.png',
 
      'swf'          : 'voicewo.swf'
 
   });
 
})
 
</script>
 
</head>
 
<body>
 
   <textarea id="txt" cols="60" name="txt" rows="6"></textarea>
 
   <div id="btn"></div>
 
</body>
 
</html>