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/image.width:proMaxHeight/image.height;
//如果 指定高度/图片高度  小于  指定宽度/图片宽度 ,  那么,我们的比例数 取 指定高度/图片高度。
//如果 指定高度/图片高度  大于  指定宽度/图片宽度 ,  那么,我们的比例数 取 指定宽度/图片宽度。
    if(rate <= 1){   
     ImgD.width = image.width*rate;   //图片新的宽度 = 宽度 * 比例数
               ImgD.height =image.height*rate;
    }else{    //  如果比例数大于1,则新的宽度等于以前的宽度。
               ImgD.width = image.width;
               ImgD.height =image.height;
    }
     }
}

时间: 2024-10-25 02:26:05

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

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

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-

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

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

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

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

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

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

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

as.2 flash图片加载效果

package { import flash.display.sprite; import flash.events.event; import flash.events.mouseevent; import flash.events.progressevent; import flash.display.bitmap; import flash.display.bitmapdata; import flash.display.simplebutton; import flash.display

js网页加载效果代码

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

jQuery图片加载显示loading效果_jquery

在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class="container"> <div class="row block" id="img-list"> <div class="col-md-3"> <img src="/Assets/On