zoukankan      html  css  js  c++  java
  • 加载多张图片,判断加载完成状态

    var totalimages = 10; 
    var loadedimages = 0;$('<img/>').load(function() {
    ++loadedimages; 
    if(loadedimages == totalimages)
    {
    //全部图片加载完成时….. 
    } });

    或者参考别人的一个插件代码:

    (function(){
        $.fn.imgLoad = function(options){
            var opts = $.extend({
                time:4000, ///等待载入时间,如果超过这个时间就直接执行回调
                callback:function(){} //默认回调
            }, options);
            var $this = this,i = 0, j = 0, len = this.length;
            $this.each(function(){
                var _this = this,
                    dateSrc = $(_this).attr("date-src"),
                    imgsrc = dateSrc?dateSrc:_this.src;
                var img = new Image();
                img.onload = function(){
                    img.onload = null;
                    _this.src = imgsrc;
                    i++;
                };
                img.src = imgsrc;
            });
            var t = window.setInterval(function(){
                j++;
                $("#msg").html(i);
                if (i==len || j*200>=opts.time){
                    window.clearInterval(t);
                    opts.callback();
                };
            },200);
        }
    
    })(jQuery);

    html结构

    注:date-src 属性 是真实的图片地址 src放一个loading...的gif 图片 ,不带date-src 也是可以的!!!

    <img date-src="http://dl.yzz.cn/public/images/100608/29_161214_3.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" />
    <img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p8.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif"  />
    <img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p13.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" />

    调用

    $(function(){
        $("img").imgLoad({
            time:10000000,//设置足够大 须等待图片载入完成,但是404的时候就杯具了...
            callback:function(){
                alert("载入完成")    
            }
        });    
    })
  • 相关阅读:
    VS2010下配置CxImage
    Visual Studio 2010 开发配置
    主机屋使用感受
    Web开发者必备的20款超赞jQuery插件
    自动页面居中
    jQuery+CSS打造的网页背景颜色切换效果
    小按钮,大学问
    【网站开发必备】——12款响应式 Lightbox(灯箱)效果插件
    修正 IE 的双倍页边距 bug
    a>b?a:b
  • 原文地址:https://www.cnblogs.com/laneyfu/p/4479660.html
Copyright © 2011-2022 走看看