javascript - Can not define value for Object in addEventListener / Creating Object Array -


i want achive this:

  1. get elements have same class (queryselectorall)
  2. use these elements href attr links.
  3. use these links check these remote images' height , width.
  4. pack them object , push declared array.

but, can not values img.addeventlistener("load", function(){}) values in there, if check console.log(this.naturalwidth) undefined outside function.

right now, got 20 tabs opened on stackoverflow "js scope" doesn't make sense situation.

note: i'm trying make without jquery.

var pselemgroup = document.queryselectorall(pselemgroupname);  for(var j = 0; j < pselemgroup.length; j++){      var obj = new object();     var href = pselemgroup[j].href;      var img = new image();     img.src = pselemgroup[j].href;     img.addeventlistener("load", function(){         obj = {             src: href,             w: this.naturalwidth,             h: this.naturalheight         };         console.log(obj);     });     //pselemgroup[j].dataset.index = j;     galleryelements.push(obj); }

also not actual question but: when try href value, got error href.

after hour learned queryselectorall returns nodelist, not array. tried:

[].slice.call(document.queryselectorall(pselemgroupname));

and changed of code that:

pselemgroup[j]["href"]

but no luck.

thank you.

edit:

so works when use galleryelements.push(obj) inside load function but, ultimate goal create array contains objects.

like:

var items = [     {         src: "foo",         w: "bar",         h: "baz"      },     {         src: "foo",         w: "bar",         h: "baz"      }, ]

i can access objects items[0].src . cant access galleryelements[] array objects same way. got error says:

undefined.src

well part of problem lack of understanding how eventlistener works , when object filled or not.

eventlisteners run in async way, so, cannot assume object filled in callback filled outside of scope.

an easy way go around make use of promise object.

you change code enough following

// loads image , resolves when ready, containing information wanted receive image  function loadimagefromurlasync( url, text ) {    return new promise( (resolve, reject) => {      let image = new image();      image.src = url;      image.addeventlistener('load', () => resolve({        title: text,        width: image.naturalwidth,        height: image.naturalheight      } ) );    });  }    function loadallimagesbyselectorasync( selector ) {    return new promise( (resolve, reject) => {      let elements = document.queryselectorall( selector ),        loaders = [], gallery = [];      (let element of elements) {        // after image loaded result gets pushed in gallery        loaders.push(           loadimagefromurlasync( element.href, element.innertext )          .then( result => gallery.push(result) )        );      }      // go resolve after images loaded      promise.all( loaders ).then( () => {        resolve( gallery );      });    });  }    loadallimagesbyselectorasync('.image-link').then( gallery => {    // writes content of gallery result div    document.queryselector('#result').innerhtml = gallery      .map( item => `${item.width}px + ${item.height}px ${item.title}` )      .join('<br />');  });
<a class="image-link" href="https://tse4.mm.bing.net/th?id=oip.x0sjkpqsiubt0asgiba-iwesdh&pid=15.1&p=0&w=232&h=175">image 1</a>  <a class="image-link" href="https://tse2.mm.bing.net/th?id=oip.wfyof5hqmlo2j9p39ntbogesc7&pid=15.1&p=0&w=279&h=175">image 2</a>  <a class="image-link" href="https://tse2.mm.bing.net/th?id=oip.sv38mmyjt0tbuzpjmm1mtwesdi&pid=15.1&p=0&w=255&h=171">image 3</a>  <a class="image-link" href="https://tse1.mm.bing.net/th?id=oip.s2udayjt1fqnot921zfsqwdhes&pid=15.1&p=0&w=300&h=300">image 4</a>  <a class="image-link" href="https://tse3.mm.bing.net/th?id=oip.cz12zxh0ukesf3y1_gareqdhes&pid=15.1&p=0&w=300&h=300">image 5</a>    <div id="result"></div>

however if not want such extensive changes current code, can change this, in case have function callback called once images loaded

i tried comment changes in code, hope enough

function loadmygallery(pselemgroupname, callback) {    // move variable declaration per function    // top, var function scoped    var pselemgroup = document.queryselectorall(pselemgroupname),      j, img, galleryelements = [];      (j = 0; j < pselemgroup.length; j++) {        img = new image();      img.src = pselemgroup[j].href;      img.addeventlistener("load", function( href ) {        // push in load method        galleryelements.push({          title: this.src,          width: this.naturalwidth,          height: this.naturalheight        });        // call callback when loaded many images found in pselemgroup.length        if (galleryelements.length === pselemgroup.length) {          callback( galleryelements );        }        // bind img context      }.bind(img));    }    if (pselemgroup.length === 0) {      // no elements      settimeout( callback, 0 );    }  }    // load gallery  loadmygallery( '.image-link', ( gallery ) => {    // writes content of gallery result div    document.queryselector('#result').innerhtml = gallery      .map( item => `${item.width}px + ${item.height}px ${item.title}` )      .join('<br />');  });
<a class="image-link" href="https://tse4.mm.bing.net/th?id=oip.x0sjkpqsiubt0asgiba-iwesdh&pid=15.1&p=0&w=232&h=175">image 1</a>  <a class="image-link" href="https://tse2.mm.bing.net/th?id=oip.wfyof5hqmlo2j9p39ntbogesc7&pid=15.1&p=0&w=279&h=175">image 2</a>  <a class="image-link" href="https://tse2.mm.bing.net/th?id=oip.sv38mmyjt0tbuzpjmm1mtwesdi&pid=15.1&p=0&w=255&h=171">image 3</a>  <a class="image-link" href="https://tse1.mm.bing.net/th?id=oip.s2udayjt1fqnot921zfsqwdhes&pid=15.1&p=0&w=300&h=300">image 4</a>  <a class="image-link" href="https://tse3.mm.bing.net/th?id=oip.cz12zxh0ukesf3y1_gareqdhes&pid=15.1&p=0&w=300&h=300">image 5</a>    <div id="result"></div>


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj...
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer ...
Read more

c# - Asp.net web api : redirect unauthorized requst to forbidden page -

im trying redirect unauthorized request forbidden page instead i'm getting forbidden page in response body , how can fix ? here's startup class : app.createperowincontext(storecontext.create); app.createperowincontext<applicationusermanager>(applicationusermanager.create); app.createperowincontext<applicationsigninmanager>(applicationsigninmanager.create); app.usecookieauthentication(new cookieauthenticationoptions { authenticationtype = defaultauthenticationtypes.applicationcookie, expiretimespan = timespan.fromdays(30), }); app.useexternalsignincookie(defaultauthenticationtypes.externalcookie); app.usetwofactorsignincookie(defaultauthenticationtypes.twofactorcookie, timespan.fromminutes(5)); app.usetwofactorrememberbrowsercookie(defaultauthenticationtypes.twofactorrememberbrowsercookie); the method im trying reach : [httpget] [authorize(roles = "admin")] public string getcurrentusername() { return userman...
Read more