multiple image call

[reddydheeraj110]

Image is getting called multiple times in network section of dev tools. when i am using BezierPlugin GSAP 2.1.2 and assigning image as css background 

 

issue.zip

See the Pen MWYWKpG by dheerajreddy8767 (@dheerajreddy8767) on CodePen.

[reddydheeraj110]

[ZachSaucier]

Hey reddydheeraj110 and welcome to the GreenSock forums,

 

Using your zip file, I had to remove the Enabler.js stuff because it's not allowed. I could not reproduce the behavior that you show. Perhaps it's because of the Enabler.js stuff? If you could please make sure that we can recreate it we'd be happy to help with a solution. 

[reddydheeraj110]

8 minutes ago, ZachSaucier said:

Hey 
Thanks Zach for pointing out CDN newbie mistake?,
I just reattached zip. but issue is still there PFA video

 

[ZachSaucier]

Still can't reproduce this using your ZIP file. Seems to be a local issue of some sort. 

 

Maybe try using the official TweenMax file from the CDN? https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js

[reddydheeraj110]

Hey Zach,
we have uploaded this issue "alike file" on the ad server . And Their Ad operations team  also pinpointed same issue with
"badge.png is making about 300 calls when the ad loads (The limit is 100 calls)."

Have tried using above CDN too issue still persist.

I am following below steps to reproduce
1. open http-server at folder.
2. open chrome dev-tools / network section with image tab selected. 
3. uncheck disable cache checkbox
4. refresh 
ta da.....???
 

[ZachSaucier]

Still can't reproduce. Maybe someone else on the forum can.

 

CodePen demo for those who want to test:

See the Pen KKKOxYE?editors=0010 by GreenSock (@GreenSock) on CodePen.

[OSUblake]

I see no issues. What makes you think this is related to gsap?

 

Maybe the problem is your HTML. You have 2 badge ids, both trying to load an image. 

 

<img src="img/badge.png" alt="" id="badge">
    <div id="mainContent">
       
        <div id="badge">
          
        </div>
    </div>

 

[OSUblake]

3 hours ago, ZachSaucier said:

Using your zip file, I had to remove the Enabler.js stuff because it's not allowed.

 

You have to turn your ad blocker off for the ad cdns to work.

[reddydheeraj110]

 

On 11/28/2019 at 10:55 PM, OSUblake said:

I see no issues. What makes you think this is related to gsap?

 

Maybe the problem is your HTML. You have 2 badge ids, both trying to load an image. 

 

<img src="img/badge.png" alt="" id="badge">
    <div id="mainContent">
       
        <div id="badge">
          
        </div>
    </div>

 

Hey ,
Sorry?,
I Was trying to resolve issue by calling png in image tag.
I have removed img tag from the html now
Issue is still persisting when i run locally Not on codePen

[OSUblake]

There's not much we can do if we can't reproduce the problem. And again, what makes you think the problem is related to gsap? Remove gsap from the equation, and see if you still have problems.

 

And you should use addEventListener instead of onload.

 

// Problematic
window.onload = function() { 
  init()
};

// Better
window.addEventListener("load", init);

 

And maybe change the name of init to something else, and don't add it to the window.