I'm trying to make an event listener to say images have been loaded.
I have the code below, but I have this error : "myImage.addEventListener is not a function"
const myImage = document.querySelectorAll("img");
myImage.addEventListener("load", function(){
console.log("OK");
});
Could you tell me what is the problem ?
Thank you
const myImage = document.querySelectorAll("img")[0];
You were selecting your image. But it returns an array.
From the docs:
Returns a non-live NodeList of all elements descended from the element
on which it is invoked that matches the specified group of CSS
selectors. (The base element itself is not included, even if it
matches.)
MDN docs
Try this:
const myImage = $("img");
myImage.on("load", function(){
console.log("OK");
});
Related
I'm toying with Flutter and I have implemented a custom-drawn widget using CustomPainter class.
Primitives are quite well documented. However, it seems that there's Image (the widget) and Image (the data structure), because if I istantiate an Image (the widget) I cannot pass it to the Canvas method drawImage because it needs another type of Image.
Problem is, I cannot wrap my head on how to load a resource into an Image data structure.
Has anyone tackled this problem?
[edit] Thanks to rmtmckenzie I solved it this way:
rootBundle.load("assets/galaxy.jpg").then( (bd) {
Uint8List lst = new Uint8List.view(bd.buffer);
UI.instantiateImageCodec(lst).then( (codec) {
codec.getNextFrame().then(
(frameInfo) {
bkImage = frameInfo.image;
print ("bkImage instantiated: $bkImage");
}
}
);
});
});
A working solution:
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;
/// Load [Image] from asset path.
/// https://stackoverflow.com/a/61338308/1321917
Future<ui.Image> loadUiImage(String assetPath) async {
final data = await rootBundle.load(assetPath);
final list = Uint8List.view(data.buffer);
final completer = Completer<ui.Image>();
ui.decodeImageFromList(list, completer.complete);
return completer.future;
}
To do this, you need to load the image directly, and then instantiate it.
I'll leave the loading part up to you - you're either going to have to do an Http request directly or use AssetBundle.load; or you could possibly use a NetworkImage/AssetImage (which both inherit ImageProvider - see the docs which contain an example).
If you take the loading directly route, you can then instantiate an image (in the form of a codec -> frame -> image) using instantiateImageCodec.
If you take the other route, you have to listen to streams etc as it is done in the docs, but you should get an Image directly.
Edit:
Thanks to the OP who has included the working code in his question. Here is what worked for him:
rootBundle.load("assets/galaxy.jpg").then( (bd) {
Uint8List lst = new Uint8List.view(bd.buffer);
UI.instantiateImageCodec(lst).then( (codec) {
codec.getNextFrame().then(
(frameInfo) {
bkImage = frameInfo.image;
print ("bkImage instantiated: $bkImage");
}
}
);
});
});
I have a code that is working with a canvas and I'd like to convert it into a layer.
The problem is that I do not want to use the build mechanism of OL3, I just want to use plain javascript.
At the moment, the problem I have is that my handleRender_ function is never called.
Here is my JS code :
ol.layer.MyLayerProperty = {
};
ol.layer.My = function (opt_options) {
var options = opt_options || {};
ol.layer.Layer.call(this, options);
this.on('render', this.handleRender_.bind(this)); //I suspect this is not working
};
ol.inherits(ol.layer.My, ol.layer.Layer);
ol.layer.My.prototype.handleRender_ = function (event) {
console.log('render process'); //never called
};
In fact, to display a canvas "above" openlayers, you simply have to use ImageCanvas.
see http://www.acuriousanimal.com/thebookofopenlayers3/chapter03_04_imagecanvas.html for example
I have the following code snippet that listen on button click event for item on a list created by dom-repeat (Polymer 1.0.0-rc.17). According to polymer.dart change.log, DomRepeatModel.item is now deprecated, although it will properly use the as attribute for now. The [] operator has been added in its place. Anyone knows how to apply it to the code to get the same result?
#reflectable
handlePurchase(event, [_]) {
print('Purchase item');
var model = new DomRepeatModel.fromEvent(event);
ShopItem item = model.item;
print(item.name);
print(item.price);
}
Found the answer, it is simply model['item'].
The earlier solution for programmatic custom element creation in polymer 0.8.5 seems to be broken in polymer 0.9.5.
If we modify the standard click-counter example to use programmatic element creation, like so:
main() {
Logger.root.level = Level.ALL;
Logger.root.onRecord.listen((LogRecord rec) {
print('${rec.loggerName}: ${rec.level.name}: ${rec.time}: ${rec.message}');
});
initPolymer();
var clickCounter = new Element.tag('click-counter');
document.body.children.add(clickCounter);
}
the on-click events are correctly invoking the {{increment}} method, but the {{count}} value is not updated in the HTML.
Polymer code should be run from
import "package:polymer/polymer.dart";
main() {
initPolymer().run(() {
// code here works most of the time
Polymer.onReady.then((value) {
// some things must wait until onReady callback is called
// for an example look at the discussion linked below
});
});
}
simple tooltip working in dartium, not as javascript
I have following html tags.
<span class="ui-btn-text">ALFL</span>
<span class="ui-btn-text">AL</span>
I want to replace ALFL with
<span class="ui-btn-text">A</span>
through jquery.
I have used
$("span .ui-btn-text").replaceWith("<span class="ui-btn-text">A</span>");
But it is not working. Please give me some answers.
Thanks in advance.
Your selector matches an element that has the class ui-btn-text with a parent that is a span. You just need to remove the space.
I also noticed that your replaceWith replaces the element with a duplicate of itself with some content. There's no need to replace the element, just set the text:
$("span.ui-btn-text").text("A");
What's about
$("span.ui-btn-text").replaceWith("<span class='ui-btn-text'>A</span>");
or
$("span.ui-btn-text").text("A");
If you just want to change the ALFL Text , you can do something like this :
var $span= $('span.ui-btn-text');
$span.each(function(){
if ($(this).text() =='ALFL') {
$(this).text('A');
}
});
Js fiddle Demo : http://jsfiddle.net/95CyN/
If you want to change text/html of all span with class ui-btn-text, do this:
// change the text inside the element
$('span.ui-btn-text').text('A');
OR
// change the html content inside the element
$('span.ui-btn-text').html('A');
OR
// Replace the html element
$('span.ui-btn-text').replaceWith('<span class="ui-btn-text">A</span>');
Your selector is looking for an element with the class of .ui-btn-next inside a span element, because you includied a superfluous space character:
$("span.ui-btn-text").replaceWith("<span class="ui-btn-text">A</span>");
Should be what you want. Also, if you only need to change the content of the element (i.e. to "A"), use text() or html():
$("span.ui-btn-text").text('A');
$("span.ui-btn-text").replaceWith('<span class="ui-btn-text">A</span>');
The replacement string you wrote is going to make the Javascript engine crash.
Try this code friend:-
$("span.ui-btn-text").each(function () {
if ($(this).html() == "ALFL") {
$(this).html("A");
}
});
});