javascript - Browser-independent way to detect when image has been loaded -


In IE, you can onreadystatechange is there onload, but I read the load events of DOM with JQuery "Ready" Wrap up very well It seems that I am just ignorant of the implementation of another good library of image loading.

The context is that I am generating images dynamically (via server callback) that can be downloaded at some time. In my IE-only code, I set the source of the IMG element, then when the on-fiestentibant event fires with "full" status, I add it to the DOM so that the user can see it.

I want to be happy with a "basic" JavaScript solution, or a pointer for a library that works. There are so many libraries and I'm sure it does not know about just one right about me. She said, we are already a jQuery user, so I'm not eager to add a large library to get this functionality.

Note: I wrote it in 2010, IE 8 / 9 Beta, Firefox 3.x, and Chrome 4.x Please use it for research purposes only, I suspect you can copy / paste it into a modern browser and can work without any problems.

I am delaying this party for some time, maybe this reply will help someone else ...

If you are using jQuery then share event Do not bother with handlers (onclick / onsmower / etc), actually stop using them completely, they use the event methods they provide.

Before adding the image to the body, this will warn, because the load event is triggered when the image is loaded into memory. This is actually what you are saying: create an image with the source of test.jpg, when test.jpg loads a warning, add it to the body. 

  var img = $ ('& lt; img src = "test.jpg" />' '); Img.load (function () {warning ('image load');}); . $ ('Body') (img) attached;

This image, after inserting the image in the body, again, is what you have said it to: create an image, set an event (any set Not set, so it is not loaded), add image to body (no source yet), now set up src ... now the image is loaded so that the event is triggered. 

  var img = $ ('& lt; img / & gt;'); Img.load (function () {warning ('image load');}); . $ ('Body') (img) attached; $ Img.attr ('src', 'test.jpg');

You can also add an error handler and use a bind () to merge a group of events. 

  var img = $ ('& lt; img / & gt;'); Img.bind ({load: function () {alert ('image loaded.');}, Error: function () {warning ('error thrown, image not loaded, maybe 404.');}}); . $ ('Body') (img) attached; Img.attr ('src', 'test.jpg');

For requests by @ChrisKempen ...

Here is a non-event driven way to break images after the DOM is loaded. This code is derived from the code of the article by which natural wide, natural white and full attributes are determined using whether the image exists or not. 

  $ ('img'). Each (function () {if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === incorrect) {Warning ('broken image');}});

Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more