Posts

Showing posts with the label Onload

Checking For Multiple Images Loaded

Answer : If you want to call a function when all the images are loaded, You can try following, it worked for me var imageCount = images.length; var imagesLoaded = 0; for(var i=0; i<imageCount; i++){ images[i].onload = function(){ imagesLoaded++; if(imagesLoaded == imageCount){ allLoaded(); } } } function allLoaded(){ drawImages(); } Can't you simply use a loop and assign the same function to all onloads? var myImages = ["green.png", "blue.png"]; (function() { var imageCount = myImages.length; var loadedCount = 0, errorCount = 0; var checkAllLoaded = function() { if (loadedCount + errorCount == imageCount ) { // do what you need to do. } }; var onload = function() { loadedCount++; checkAllLoaded(); }, onerror = function() { errorCount++; checkAllLoaded(); }; for (var i = 0; i < imageCount; i++) { var img = new Image(); img.onload = onload;...

Anyway To Change Href Of Link With No Id And No Jquery?

Answer : window.onload=function() { var links = document.links; // or document.getElementsByTagName("a"); for (var i=0, n=links.length;i<n;i++) { if (links[i].className==="checkout_link" && links[i].title==="Checkout") { links[i].href="someotherurl.html"; break; // remove this line if there are more than one checkout link } } } Update to include more ways to get at the link(s) document.querySelector("a.checkout_link"); // if no more than one document.querySelectorAll("a.checkout_link"); // if more than one to be even more selective: document.querySelector("a[title='Checkout'].checkout_link"); Lastly newer browsers have a classList if (links[i].classList.contains("checkout_link") ... window.onload = function() { alert(document.querySelector("a[title='Checkout 2'].checkout_link").href); } <a href="x.html" class=...

AngularJS - Image "onload" Event

Answer : Here's a re-usable directive in the style of angular's inbuilt event handling directives: angular.module('sbLoad', []) .directive('sbLoad', ['$parse', function ($parse) { return { restrict: 'A', link: function (scope, elem, attrs) { var fn = $parse(attrs.sbLoad); elem.on('load', function (event) { scope.$apply(function() { fn(scope, { $event: event }); }); }); } }; }]); When the img load event is fired the expression in the sb-load attribute is evaluated in the current scope along with the load event, passed in as $event. Here's how to use it: HTML <div ng-controller="MyCtrl"> <img sb-load="onImgLoad($event)"> </div> JS .controller("MyCtrl", function($scope){ // ... $scope.onImgLoad = function (event) { // ... } Note: "sb" is just the prefix I...