博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS自动缩放页面图片
阅读量:7000 次
发布时间:2019-06-27

本文共 1620 字,大约阅读时间需要 5 分钟。

hot3.png

02

 * 缩略图

03

 *

04

 * bool isScaling 是否缩放

05

 * int width 宽度

06

 * int height 高度

07

 * string loadindPic 表示“正在加载中”的图片地址

08

 */

09

jQuery.fn.LoadImage = function (isScaling, width, height, loadindPic) {

10

    if (loadindPic == null) {

11

        loadindPic = "../images/msg_img/loading.gif";

12

    }

13

 

14

    return this.each(function () {

15

        var _this = $(this);

16

        var src = $(this).attr("src")

17

            var img = new Image();

18

        img.src = src;

19

 

20

        // 自动缩放图片

21

        var autoScaling = function () {

22

            if (isScaling) {

23

                if (img.width > 0 && img.height > 0) {

24

                    if (img.width / img.height >= width / height) {

25

                        if (img.width > width) {

26

                            _this.width(width);

27

                            _this.height((img.height * width) / img.width);

28

                        } else {

29

                            _this.width(img.width);

30

                            _this.height(img.height);

31

                        }

32

                    } else {

33

                        if (img.height > height) {

34

                            _this.height(height);

35

                            _this.width((img.width * height) / img.height);

36

                        } else {

37

                            _this.width(img.width);

38

                            _this.height(img.height);

39

                        }

40

                    }

41

                }

42

            }

43

        }

44

 

45

        // 处理ff下会自动读取缓存图片

46

        if (img.complete) {

47

            autoScaling();

48

            return;

49

        }

50

        $(this).attr("src", "");

51

        var loading = $("<img alt=\"加载中...\" title=\"图片加载中...\" src=\"" + loadindPic + "\" />");

52

 

53

        _this.hide();

54

        _this.after(loading);

55

        $(img).load(function () {

56

            autoScaling();

57

            loading.remove();

58

            _this.attr("src", this.src);

59

            _this.show();

60

            //$('.photo_prev a,.photo_next a').height($('#big-pic img').height());

61

        });

62

    });

63

}

64

 

65

 

66

// 应用举例

67

$(function () {

68

    $('#Article .content img').LoadImage(true, 660, 660, 'http://127.0.0.12:8088/statics/images/s_nopic.gif');

69

})

转载于:https://my.oschina.net/yonghan/blog/524764

你可能感兴趣的文章
最流行的5个前端框架对比
查看>>
hdoj 2795 Billboard 【线段树 单点更新 + 维护区间最大值】
查看>>
[置顶] MySQL -- 创建函数(Function
查看>>
视频云的选型调研
查看>>
android中使用百度定位sdk实时的计算移动距离
查看>>
android:Cordova Android, hello Cordova ,PhoneGap android
查看>>
MySQL 性能调优的10个方法
查看>>
http协议的再次理解
查看>>
hdu 2089 不要62 【数位DP】
查看>>
Android 利用Gson生成或解析json
查看>>
mybatis 之resultType="Map"
查看>>
关于redis中SDS简单动态字符串
查看>>
WordPress主循环(The Loop)函数have_posts(),the_post()详解
查看>>
【Java学习笔记之八】JavaBean中布尔类型使用注意事项
查看>>
jQuery核心函数——(一)
查看>>
License友好的前端组件合集
查看>>
OCR 基本知识
查看>>
Oracle中对数字加汉字的排序(完好)
查看>>
linux kvm虚拟机使用
查看>>
leetcode笔记:Bulls and Cows
查看>>