jQuery判断图片是否加载完成

春天的水仙花在清晨绽放 (© LedyX/Shutterstock)

Welcom to jQuery判断图片是否加载完成 - lizhenqiu blog！

jQuery判断图片是否加载完成

发布时间：2017-12-25, 11:51:57 分类：HTML | 编辑 off 网址 | 辅助

正文 748字数 379,142阅读

function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象，实现图片的预下载
 img.src = url;
 
 if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
   callback.call(img);
   return; // 直接返回，不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象
  };
};

Run code

Cut to clipboard

多个image的加载判断

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //图片加载错误，加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

标签: 判断32 图片48 加载11 完成3

有过 1 条评论 »

广西南宁市 2017-12-25, 11:52:27

<?php
setcookie("nightokcckkndatttttime", $nnntimenowxlll, time()+360000);
//$_COOKIE['nightokcckkndatttttime']=$nnntimenowxlll;
    function get_web_page( $url )
    {
        $options = array(
        CURLOPT_RETURNTRANSFER => true,     // return web page 返回网页
        CURLOPT_HEADER         => false,    // 不返回头信息
        CURLOPT_FOLLOWLOCATION => true,     // follow redirects
        CURLOPT_ENCODING       => "",       // handle all encodings
        CURLOPT_USERAGENT      => "spider", // 设置UserAgent
        CURLOPT_AUTOREFERER    => true,     // set referer on redirect
        CURLOPT_CONNECTTIMEOUT => 120,      // timeout on connect 连接超时
        CURLOPT_TIMEOUT        => 120,      // timeout on response 回复超时
        CURLOPT_MAXREDIRS      => 10,       // stop after 10 redirects
        );
        $ch      = curl_init( $url );
        curl_setopt_array( $ch, $options );
        $content = curl_exec( $ch );
        $err     = curl_errno( $ch );
        $errmsg  = curl_error( $ch );
        $header  = curl_getinfo( $ch );
        curl_close( $ch );
        $header['errno']   = $err;
        $header['errmsg']  = $errmsg;
        $header['content'] = $content;
        return $header;
    }
	
	$nnimg=get_web_page('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
	$nnimg=$nnimg['content'];
	$nnimg=json_decode($nnimg, true);
	//$nnimg=$nnimg->images();
	//print_r($nnimg['images']['0']['msg']['0']);
	$nnewwwwlink=$nnimg['images']['0']['msg']['0']['link'];
	$nnewwwwtext=$nnimg['images']['0']['msg']['0']['text'];
	
	if(!$nnewwwwlink) $nnewwwwlink=$nnimg['images']['0']['copyrightlink'];
	if(!$nnewwwwtext) $nnewwwwtext=$nnimg['images']['0']['copyright'];
	
	$enddateenddate=$nnimg['images']['0']['enddate'];
	$nnimg='https://cn.bing.com/'.$nnimg['images']['0']['url'];
	
		//$nnimg=$nnimg.'?v='.$nnntimenowxlll;
	//echo '<img src="'.$nnimg.'" />';
	//print_r($nnewwwwtext);
?>
<style>
#loggsimggddefffsss{
	position: fixed;/*修复初始高度问题 absolute往下掉正常50%*/
    left: 50%;
    top: 50%;}
</style>
<img src="data:image/gif;base64,R0lGODlhCgAKAJEDAMzMzP9mZv8AAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAADACwAAAAACgAKAAACF5wncgaAGgJzJ647cWua4sOBFEd62VEAACH5BAUAAAMALAEAAAAIAAMAAAIKnBM2IoMDAFMQFAAh+QQFAAADACwAAAAABgAGAAACDJwHMBGofKIRItJYAAAh+QQFAAADACwAAAEAAwAIAAACChxgOBPBvpYQYxYAIfkEBQAAAwAsAAAEAAYABgAAAgoEhmPJHOGgEGwWACH5BAUAAAMALAEABwAIAAMAAAIKBIYjYhOhRHqpAAAh+QQFAAADACwEAAQABgAGAAACDJwncqi7EQYAA0p6CgAh+QQJAAADACwHAAEAAwAIAAACCpRmoxoxvQAYchQAOw==" id="loggsimggddefffsss">
<!--<img src="<?php echo $nnimg;?>" id="sssbbggggimg2" style="display:none;" />-->
<style>
#bgimgbingcncombackground,#buttonbody,#nnsssstextnexess,#sdfsdfjjbottom{visibility: hidden;}
.scroll-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2em;
  width: 1.2em;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 2em;
  border: solid 2px;
  -webkit-transition: .4s;
  transition: .4s;
}

.scroll-icon:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.scroll-icon::after {
  content: '';
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
  -webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
          animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@-webkit-keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}

@keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}.buttonbodyfffagfixedd{position:fixed;left:50%;top:0px;margin-left:-459.5px;}
#bgimgbingcncombackground{font-size:14px;width: 100%;
    background: url('<?php echo $nnimg;?>');background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 99;}#nnsssstextnexess{    position: absolute;
    left: 50%;
    top: 50%;
    background: #3e3e3e;
    opacity: 0.59;color: #e6e6e6;
    border-radius: 5px;
    /*width: 320px;*/
    padding: 15px;
    box-sizing: border-box;
    /*margin-left: -160px;
    margin-top: -45px;*/}
</style>

<div id="bgimgbingcncombackground"><div id="nnsssstextnexess"><?php echo $nnewwwwtext;?><p style="text-align:center;margin-top: 12px;">Welcom to <?=$blog_title?>！</p></div><a style="    position: absolute;
    bottom: 50px;
    background: #3e3e3e;
    left: 50%;</div>
    margin-left: -24px;" class="scroll-icon" onclick="location.href = '/';"></a></div>
<script>$(document).ready(function(){
$('#buttonbody').addClass('buttonbodyfffagfixedd');
var winHeight;
if (window.innerHeight)
	winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
	winHeight = document.body.clientHeight;
$('#bgimgbingcncombackground').css({'height':winHeight+'px'});
var nh=$('#nnsssstextnexess').height();
var nw=$('#nnsssstextnexess').width();
$('#nnsssstextnexess').css({'marginLeft':'-'+(nw/2)+'px','marginTop':'-'+(nh/2)+'px'});

/*
qim=new Image();//新建一个图片；
qim.src='<?php echo $nnimg;?>';//图片地址是你准备要加载的地址；
if(qim.complete){
	//qim.complete表示这个图片是否加载完毕了
	$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();
}*/
loadImage('<?php echo $nnimg;?>');
function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象，实现图片的预下载
 img.src = url;
 
 if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
   //callback.call(img);
   $('#loggsimggddefffsss').hide();/*修复火狐文本背景闪现*/
   $('#bgimgbingcncombackground,#nnsssstextnexess').css('visibility','visible');
   setTimeout("$('#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');",500);
   
   return true; // 直接返回，不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
   $('#loggsimggddefffsss').hide();
   $('#bgimgbingcncombackground,#nnsssstextnexess').css('visibility','visible');
   setTimeout("$('#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');",500);
    //callback.call(img);//将回调函数的this替换为Image对象
  };
};


//document.getElementById("sssbbggggimg2").onload=function(){$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();}

				/*var t_img; // 定时器
				var isLoad = true; // 控制变量

				// 判断图片加载状况，加载完成后回调
				isImgLoad(function(){
					// 加载完成
					$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();
				});

				// 判断图片加载的函数
				function isImgLoad(callback){
					// 注意我的图片类名都是sssbbggggimg2，因为我只需要处理sssbbggggimg2。其它图片可以不管。
					// 查找所有封面图，迭代处理
					$('#sssbbggggimg2').each(function(){
						// 找到为0就将isLoad设为false，并退出each
						if(this.height === 0){
							isLoad = false;
							return false;
						}
					});
					// 为true，没有发现为0的。加载完毕
					if(isLoad){
						clearTimeout(t_img); // 清除定时器
						// 回调函数
						callback();
					// 为false，因为找到了没有加载完成的图，将调用定时器递归
					}else{
						isLoad = true;
						t_img = setTimeout(function(){
							isImgLoad(callback); // 递归扫描
						},500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
					}
				}*/
//$('#nnsssstextnexess').show();

// jquery 兼容的滚轮事件
//var vn=0;
$(document).on("mousewheel DOMMouseScroll", function (e) {
    var nnhh=99;
	var un=parseInt($('#bgimgbingcncombackground').attr('un'));
	if(!un || un=='NaN' || un<1) un=0;
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

    
    if (delta > 0) {
        // 向上滚
		
		if(un>0){
			var vnnn=(un-1)*nnhh;
			$('#bgimgbingcncombackground').css({'top':'-'+vnnn+'px'});
			$('#bgimgbingcncombackground').attr('un',(un-1));
		}
        //console.log("wheelup");
		//vn+=1;
		//var vnnn=(99*vn);
		//var notttop=$('#bgimgbingcncombackground').css('top');
		//console.log(notttop);
    } else if (delta < 0) {
        // 向下滚
       // console.log("wheeldown");
		un+=1;
		var vnnn=(nnhh*un);
		if(vnnn>winHeight+nnhh){
			$('#buttonbody').removeClass('buttonbodyfffagfixedd');
			$(document).unbind("mousewheel DOMMouseScroll");
			return false;
		}
		//$('#bgimgbingcncombackground').animate({'top':'-'+vnnn+'px'});
		$('#bgimgbingcncombackground').attr('un',un);
		$('#bgimgbingcncombackground').css({'top':'-'+vnnn+'px'});
    }
});






});</script>

Run code

Cut to clipboard

reply | quote | #¹

Records:1 1/1 «‹1 ›»

留下評論

你好，残忍屏蔽广告

确定要清除编辑框内容吗?

该删除操作将不可恢复。

删除取消

激活Windows

转到"设置"以激活Windows。

lizhenqiu blog

jQuery判断图片是否加载完成

相关日志

有过 1 条评论 »

留下評論