javascript - JS动态加载图片获取高度
PHP中文网
PHP中文网 2017-04-10 15:09:49
[JavaScript讨论组]

循环加载的p结构:

Sunset Lake

A peaceful sunset view...

by skyway

加载完成执行的JS:

$(function(){
    $('.img_load').each(function() {
        $(this).load(function(){
            if( $(this).height() > 300){
                //显示
                $(this).parent().parent().next().css('display', 'block');
            }
        });
    });
});

但是这只是进入页面是加载数据有用,而通过ajax

$.ajax({
    ……
})
.done(function(data){
    ……
    $.each(pics, function(index, val){
        var add =
                "

" + "

" + "" + "

" + "" + ""+ this.object +"" + "

" + "

"+ this.words +"

" + "

by " + this.author +"

" + "

"+ "

"; $("#contain").append(add); //判断高度并修改状态 var img = new Image(); img.src = this.url; img.onload = function(){ var height = img.height; if( height > 300){ $(add).find('.stop').css('display', 'block'); } }; }); …… });

动态加载的数据则不会去执行之前的JS函数。通过Image()的onload()函数虽然可以取到高度,但是还是无法修改的显示状态。望大神帮忙解答!

效果(太高的图片底部有变化):

PHP中文网
PHP中文网

认证0级讲师

全部回复(1)
PHP中文网

找到问题了,自己傻了,ajax请求漏了一层a标签。

方式一:
//判断<img class='img_load' src='' />高度并修改<span>状态
var img_stop = function(){
    var height = 800;
    $('.img_load').each(function() {
        $(this).load(function(){
            if( $(this).height() > height){
                $(this).parent().parent().next().css('display', 'block');
            }
        });
    });
};

方式二:
//判断实际加载的图片的高度url为链接,key为标记
var img_load = function(url, key) {
    var img = new Image();
    img.src = url;
    img.onload = load_img(img, key);
    function load_img(img, key){
        var height = img.height;
        if( height > 800){
            var str = 'p[data-key=' + key + ']';
            $(str).find('.stop').css('display', 'block');
            //$(add).find('.stop').css('display', 'block');
        }
    }
};

// 初始加载调用图片处理函数
$(function(){
    img_stop();
});

//ajax请求处理
$.ajax({
    ……
})
.done(function(data){
    ……
    $.each(pics, function(index, val){
        var add =
                "

<p class='grid' data-key='" + this.key +"'>" +
                    "<p class='imgholder'>" +
                        "<img class='img_load' src='" + this.url +"' />" +
                    "</p>" +
                    "<span class='stop'></span>" +
                    "<strong>"+ this.object +"</strong>" +
                    "<p class='description'>" +
                        "<p>"+ this.words +"</p>" +
                        "<p class='meta'>by " + this.author +"</p>" +
                    "</p>"+
                "</p>

";
        $("#contain").append(add);
        //方式一
        img_stop();
        //方式二
        //img_load(this.url, this.key);
    });
    ……
});

方式二用于动态加载图片的时候(ajax),初始载入页面还是得通过方式一。所以方式一更方便。

$(windows).load一直不会执行(不是完全加载完后进入$(windows).load么?)。所以用的$(document).ready(function(){})的简写为$(function(){})来处理载入页面的处理

ajax后直接调用img_stop(),如果用Image()虽然可以取到图片的高度,也可以定位到span标签,但是修改span样式无效,这里不理解。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号