ฉันจะตรวจสอบได้อย่างไรว่ามีการโหลดรูปภาพโดยใช้ Javascript / jQuery

ฉันกำลังเขียน Javascript เพื่อปรับขนาดภาพขนาดใหญ่ให้พอดีกับหน้าต่างเบราว์เซอร์ของผู้ใช้ (ฉันไม่ได้ควบคุมขนาดของภาพต้นฉบับ)

ดังนั้นสิ่งนี้จะอยู่ใน HTML:

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

มีวิธีตรวจสอบว่าsrcรูปภาพในimgแท็กถูกดาวน์โหลดหรือไม่

ฉันต้องการสิ่งนี้เพราะฉันพบปัญหาหาก$(document).ready()ดำเนินการก่อนที่เบราว์เซอร์จะโหลดภาพ $("#photo").width()และ$("#photo").height()จะส่งคืนขนาดของตัวยึดตำแหน่ง (ข้อความแสดงแทน) ในกรณีของฉันนี่คือ 134 x 20

ตอนนี้ฉันกำลังตรวจสอบว่าความสูงของรูปถ่ายน้อยกว่า 150 หรือไม่และสมมติว่าถ้าเป็นเช่นนั้นเป็นเพียงข้อความแสดงแทน แต่นี่เป็นการแฮ็กค่อนข้างมากและจะพังหากรูปภาพมีความสูงน้อยกว่า 150 พิกเซล (ไม่น่าจะเป็นในกรณีเฉพาะของฉัน) หรือหากข้อความแสดงแทนมีความสูงมากกว่า 150 พิกเซล (อาจเกิดขึ้นในหน้าต่างเบราว์เซอร์ขนาดเล็ก) .

แก้ไข:สำหรับใครที่ต้องการดูรหัส:

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

อัปเดต : ขอบคุณสำหรับคำแนะนำ มีความเสี่ยงที่เหตุการณ์จะไม่ถูกเริ่มทำงานหากฉันตั้งค่าการเรียกกลับสำหรับ$("#photo").loadเหตุการณ์ดังนั้นฉันจึงกำหนดเหตุการณ์ onLoad โดยตรงบนแท็กรูปภาพ สำหรับบันทึกนี่คือรหัสที่ฉันลงท้ายด้วย:

<img id="photo"
     onload="photoLoaded();"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

จากนั้นใน Javascript:

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

เพิ่มผู้ฟังเหตุการณ์หรือให้ภาพประกาศด้วยตัวเองเมื่อโหลด จากนั้นหาขนาดจากตรงนั้น

<img id="photo"
     onload='loaded(this.id)'
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

การใช้ที่เก็บข้อมูล jqueryคุณสามารถกำหนดสถานะ "โหลด" ได้

<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />

จากนั้นที่อื่นคุณสามารถทำได้:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

คำตอบที่ถูกต้องคือการใช้event.special.load

เป็นไปได้ว่าเหตุการณ์การโหลดจะไม่ถูกทริกเกอร์หากรูปภาพถูกโหลดจากแคชของเบราว์เซอร์ เพื่ออธิบายถึงความเป็นไปได้นี้เราสามารถใช้เหตุการณ์โหลดพิเศษที่จะเริ่มทำงานทันทีหากภาพพร้อม ปัจจุบัน event.special.load มีให้ใช้งานเป็นปลั๊กอิน

ตามเอกสารใน. load ()

คุณต้องการทำตามที่ Allain พูดอย่างไรก็ตามโปรดทราบว่าบางครั้งภาพจะโหลดก่อนที่จะพร้อม Dom ซึ่งหมายความว่าตัวจัดการโหลดของคุณจะไม่เริ่มทำงาน วิธีที่ดีที่สุดคือทำตามที่ Allain บอก แต่ตั้งค่า src ของรูปภาพด้วย javascript หลังจากติดโหลดแฮนเดอร์ ด้วยวิธีนี้คุณสามารถรับประกันได้ว่าไฟไหม้

ในแง่ของความสามารถในการเข้าถึงไซต์ของคุณจะยังใช้งานได้สำหรับผู้ที่ไม่มีจาวาสคริปต์หรือไม่ คุณอาจต้องการให้แท็ก img เป็น src ที่ถูกต้องแนบตัวจัดการพร้อม dom ของคุณเพื่อเรียกใช้ js ของคุณ: ล้างภาพ src (กำหนดค่าและความสูงด้วย css เพื่อป้องกันไม่ให้หน้ากะพริบ) จากนั้นตั้งค่าตัวจัดการโหลด img ของคุณ จากนั้นรีเซ็ต src เป็นไฟล์ที่ถูกต้อง วิธีนี้คุณจะครอบคลุมทุกฐาน :)

ตามหนึ่งในความคิดเห็นล่าสุดของคำถามเดิมของคุณ

$(function() {

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()  {
    if (!$("#photo").get(0).complete) {
       $("#photo").load(function() {
          adjust_photo_size();
       });
    } else {
      ... 
    }
});

คำเตือนคำตอบนี้อาจทำให้เกิดลูปร้ายแรงใน ie8 และต่ำกว่าเนื่องจาก img.complete ไม่ได้ถูกตั้งค่าอย่างถูกต้องโดยเบราว์เซอร์เสมอไป หากคุณต้องรองรับ ie8 ให้ใช้แฟล็กเพื่อจดจำรูปภาพที่โหลด

ลองสิ่งที่ชอบ:

$("#photo").load(function() {
    alert("Hello from Image");
});

มีปลั๊กอิน jQuery ที่เรียกว่า "imagesLoaded" ที่ให้วิธีการที่เข้ากันได้กับข้ามเบราว์เซอร์เพื่อตรวจสอบว่ามีการโหลดรูปภาพขององค์ประกอบหรือไม่

เว็บไซต์: https://github.com/desandro/imagesloaded/

การใช้งานคอนเทนเนอร์ที่มีรูปภาพมากมายอยู่ภายใน:

$('container').imagesLoaded(function(){
 console.log("I loaded!");
})

ปลั๊กอินนั้นยอดเยี่ยม:

1. ใช้สำหรับตรวจสอบคอนเทนเนอร์ที่มีรูปภาพมากมายอยู่ภายใน
2. ใช้ตรวจสอบ img เพื่อดูว่ามีการโหลดหรือไม่

มีความคิดเห็นเกี่ยวกับเรื่องนี้หรือไม่?

...

doShow = function(){
  if($('#img_id').attr('complete')){
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()',100);
  }
};

$('#img_id').attr('src','image.jpg');

doShow();

...

ดูเหมือนจะใช้ได้ทุกที่ ...

ฉันเพิ่งสร้างฟังก์ชัน jQuery เพื่อโหลดภาพโดยใช้jQuerys Deferred Objectซึ่งทำให้ง่ายต่อการตอบสนองต่อเหตุการณ์ load / error:

$.fn.extend({
    loadImg: function(url, timeout) {
        // init deferred object
        var defer = $.Deferred(),
            $img = this,
            img = $img.get(0),
            timer = null;

        // define load and error events BEFORE setting the src
        // otherwise IE might fire the event before listening to it
        $img.load(function(e) {
            var that = this;
            // defer this check in order to let IE catch the right image size
            window.setTimeout(function() {
                // make sure the width and height are > 0
                ((that.width > 0 && that.height > 0) ? 
                    defer.resolveWith : 
                    defer.rejectWith)($img);
            }, 1);
        }).error(function(e) {
            defer.rejectWith($img);
        });

        // start loading the image
        img.src = url;

        // check if it's already in the cache
        if (img.complete) {
            defer.resolveWith($img);
        } else if (0 !== timeout) {
            // add a timeout, by default 15 seconds
            timer = window.setTimeout(function() {
                defer.rejectWith($img);
            }, timeout || 15000);
        }

        // return the promise of the deferred object
        return defer.promise().always(function() {
            // stop the timeout timer
            window.clearTimeout(timer);
            timer = null;
            // unbind the load and error event
            this.off("load error");
        });
    }
});

การใช้งาน:

var image = $('<img />').loadImg('http://www.google.com/intl/en_com/images/srpr/logo3w.png')
.done(function() {
    alert('image loaded');
    $('body').append(this);
}).fail(function(){
    alert('image failed');
});

ดูการทำงานได้ที่: http://jsfiddle.net/roberkules/AdWZj/

ฟังก์ชั่นนี้จะตรวจสอบว่ารูปภาพถูกโหลดขึ้นอยู่กับขนาดที่วัดได้หรือไม่ เทคนิคนี้มีประโยชน์หากสคริปต์ของคุณกำลังดำเนินการหลังจากโหลดรูปภาพไปแล้วบางส่วน

imageLoaded = function(node) {
    var w = 'undefined' != typeof node.clientWidth ? node.clientWidth : node.offsetWidth;
    var h = 'undefined' != typeof node.clientHeight ? node.clientHeight : node.offsetHeight;
    return w+h > 0 ? true : false;
};

ฉันพบว่าสิ่งนี้ได้ผลสำหรับฉัน

document.querySelector("img").addEventListener("load", function() { alert('onload!'); });

เครดิตทั้งหมดไปที่ Frank Schwieterman ผู้แสดงความคิดเห็นเกี่ยวกับคำตอบที่ยอมรับ ฉันต้องวางไว้ตรงนี้มันมีค่าเกินไป ...

เราพัฒนาหน้าที่โหลดรูปภาพจำนวนหนึ่งจากนั้นทำหน้าที่อื่น ๆ หลังจากโหลดรูปภาพแล้วเท่านั้น เป็นเว็บไซต์ที่มีผู้เข้าชมจำนวนมาก ดูเหมือนว่าสคริปต์ง่ายๆต่อไปนี้จะใช้ได้กับทุกเบราว์เซอร์:

$(elem).onload = function() {
    doSomething();
}

แต่นี่เป็นปัญหาที่เป็นไปได้สำหรับ IE9!

เบราว์เซอร์เดียวที่เรารายงานปัญหาคือ IE9 เราไม่แปลกใจเหรอ? ดูเหมือนว่าวิธีที่ดีที่สุดในการแก้ปัญหาคือการไม่กำหนด src ให้กับรูปภาพจนกว่าจะมีการกำหนดฟังก์ชัน onload ดังนี้:

$(elem).onload = function() {
    doSomething();
}
$(elem).attr('src','theimage.png');

ดูเหมือนว่าบางครั้ง IE 9 จะไม่โยนไฟล์ onloadเหตุการณ์ไม่ว่าด้วยเหตุผลใดก็ตาม วิธีแก้ปัญหาอื่น ๆ ในหน้านี้ (เช่นจาก Evan Carroll เป็นต้น) ยังไม่ได้ผล เหตุผลที่ตรวจสอบว่าสถานะการโหลดสำเร็จแล้วและเรียกใช้ฟังก์ชันหรือไม่และหากไม่เป็นเช่นนั้นให้ตั้งค่าตัวจัดการออนโหลด แต่แม้ว่าคุณจะทำเช่นนั้นเราก็แสดงให้เห็นในการทดสอบว่ารูปภาพสามารถโหลดระหว่างสองบรรทัดของ js ได้ ปรากฏว่าไม่โหลดไปยังบรรทัดแรกจากนั้นโหลดก่อนที่จะตั้งค่าตัวจัดการออนโหลด

เราพบว่าวิธีที่ดีที่สุดในการรับสิ่งที่คุณต้องการคืออย่ากำหนด src ของรูปภาพจนกว่าคุณจะตั้งค่าonloadทริกเกอร์เหตุการณ์

เราเพิ่งหยุดสนับสนุน IE8 เมื่อเร็ว ๆ นี้ดังนั้นฉันจึงไม่สามารถพูดถึงเวอร์ชันก่อน IE9 ได้มิฉะนั้นจากเบราว์เซอร์อื่น ๆ ทั้งหมดที่ใช้บนไซต์ - IE10 และ 11 รวมถึง Firefox, Chrome, Opera, Safari และอะไรก็ตาม เบราว์เซอร์มือถือที่ผู้คนใช้งาน - การตั้งค่าsrcก่อนกำหนดonloadตัวจัดการก็ไม่ได้เป็นปัญหา

ฉันขอแนะนำโซลูชัน CSS ทั้งหมดได้หรือไม่

เพียงแค่มี Div ที่ต้องการแสดงภาพเข้ามาตั้งค่าภาพเป็นพื้นหลัง จากนั้นมีคุณสมบัติbackground-size: coverหรือbackground-size: containขึ้นอยู่กับว่าคุณต้องการ

cover จะครอบตัดรูปภาพจนกว่าด้านที่เล็กกว่าจะครอบคลุมกล่อง containจะเก็บภาพทั้งหมดไว้ใน div โดยเว้นช่องว่างไว้ด้านข้าง

ตรวจสอบตัวอย่างด้านล่าง

div {
  height: 300px;
  width: 300px;
  border: 3px dashed grey;
  background-position: center;
  background-repeat: no-repeat;
}

.cover-image {
  background-size: cover;
}

.contain-image {
  background-size: contain;
}

<div class="cover-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>
<br/>
<div class="contain-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>

ฉันพบว่าวิธีง่ายๆนี้เหมาะกับฉันที่สุด:

        function setEqualHeight(a, b) {
            if (!$(a).height()) {
                return window.setTimeout(function(){ setEqualHeight(a, b); }, 1000);
            }
            $(b).height($(a).height());
        }

        $(document).ready(function() {
            setEqualHeight('#image', '#description');
            $(window).resize(function(){setEqualHeight('#image', '#description')});
        });
    </script>