js图片加载效果代码

提示:您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta http-equiv="content-language" content="zh-CN" /><meta http-equiv="pragma" content="no-cache" /><meta http-equiv="expires" content="0" /><meta http-equiv="MSThemeCompatible" content="Yes" /><meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="widow-target" content="_top" /><meta name="robots" content="index, follow" /><meta name="author" content="3945, [email]ljm77@km169.net[/email]" />
<meta name="keywords" content="" /><meta name="description" content="" /><meta name="copyright" content="Copyright 3945 All Rights Reserved" />
<title>无标题文档</title>
<style type="text/css"><!--
a, a:link{text-decoration: none; color:#000000; font-size:9pt;} a:visited{text-decoration: none; color:#000000;} a:hover{text-decoration: underline; color:red;}
body, td, p, li, div, select{font-size:9pt; font-family:"宋体";}
img{border:0;}
--></style>
<script type="text/javascript">

/*图片后加载处理 运行*/
function runImgs()
{
 var o=null,d=null,s=null,l=document.images.length;
 for(var i=0; i<l; i++)
 {
  o=document.images[i];
  if(d=o.getAttribute('summary'))
  {
   s=eval('('+d+')');
   if(s.w<=0)
   {
    window.setTimeout(function(o,s){
     return function(){
      var img=new Image();
      img.onerror=function(){with(o){setAttribute('width','100'),setAttribute('height','100'),setAttribute('src',this.src)}};
      img.onload=function()
      {
       var iw=this.width;
       var ih=this.height;
       var mx=(0-s.w);
       iw=iw>0?iw:80;
       iw=s.w<0?(iw>mx?mx:iw):iw;
       o.setAttribute('src',this.src);
       o.setAttribute('width',iw);
      };
      img.setAttribute('src',s.u);
     };
    }(o,s),1);
   }
   else with(o){setAttribute('src',s.u),setAttribute('width',s.w),setAttribute('height',s.h)}; //指定大小
   s=null;
  }
  o=d=null;
 }
}

window.onload=function(){
 runImgs();
}
</script>
</head>

<body>
 <img src="about:blank" width="0" summary="{u:'yun_qi_img/logo.gif',w:146,h:95}" /> <!-- 指定大小 -->
 <img src="about:blank" width="0" summary="{u:'yun_qi_img/logo.gif',w:0}" />   <!-- 原始大小(图片原大小) -->
 <img src="about:blank" width="0" summary="{u:'yun_qi_img/logo.gif',w:-50}" />  <!-- 指定最大值 -->
 <img src="about:blank" width="0" summary="{u:'yun_qi_img/logo.gif',w:-250}" />  <!-- 指定最大值 -->
</body>
</html>

提示:您可以先修改部分代码再运行

时间: 2024-09-19 21:27:43

js图片加载效果代码的相关文章

jquery 图片加载效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

js 图片加载效果

程序代码 var proMaxHeight = 40; var proMaxWidth  = 120; function proDownImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/

js网页加载效果代码

提示:您可以先修改部分代码再运行 P> 已经完成: 本代码由网页特效网提供 提示:您可以先修改部分代码再运行

iOS程序开发之使用PlaceholderImageView实现优雅的图片加载效果_IOS

说明 1. PlaceHolderImageView基于SDWebImage编写 2. 给定一个图片的urlString,以及一个placeholderImage就可以优雅的显示图片加载效果 效果 源码 PlaceholderImageView.h/.m // // PlaceholderImageView.h // SDWebImageViewPlaceHorder // // Created by YouXianMing on 16/9/14. // Copyright 2016年 YouX

java给图片加水印效果代码

以前用到的java给图片加水印效果代码都有些小问题,今天我们修正了里面的问题 增加了补白的功能 重构了代码 import java.awt.alphacomposite; import java.awt.color; import java.awt.font; import java.awt.graphics2d; import java.awt.image; import java.awt.geom.affinetransform; import java.awt.image.affinetr

js图片加载获取不到宽度和高度解决方法总结

第一次浏览的时候你根本就获取不到图片的宽高值,打印出来都是0,这些纠结了吧,怎么解决呢?就用setTimeout延时加载,200毫秒之后就执行,等图片彻底加载完之后就可以获取宽高了,这样就实现了只适应宽高和水平垂直居中了. 代码  代码如下 复制代码 var parent=$(".imgshow a img");         parent.click(function(){  //alert(test.width());                 var url=$(this

js图片翻书效果代码分享_javascript技巧

这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习. 运行效果图: 大家可以先运行一下    -------------------------------------效果运行----------------------------------------- 为大家分享的

解决js图片加载时出现404的问题_javascript技巧

运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片. img标签事件属性 img标签可使用的时间属性有:onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,

js 图片加载失败,所导致的浏览器兼容问题

问题描述 网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的.情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默认图,例如PC端的火狐,IOS中Safari,还有安卓中的UC浏览器.这样在手机中就会导致左右两侧图片高度不一致!如下图: 解决方案 其实这里解决很简单,判断当图片加载失败的时候给一个默认图就可以了,不让浏览器使用其自带的默认图.  代码如下 复制代码 <img src="/no