I have a webpage that waits for images to be loaded until they are visible in the viewport of the browser (lazyload). The dimensions of images are unknown. On the top of the webpage I have a link that jumps to an anchor on the bottom of the page. When a user presses the link the browsers scrolls to the wrong position of the webpage. I assume this is because the images are loaded in the browser and this changes the height of the page. In other words the position of the anchor changes after the link is link is clicked. Is there anyway to solve this paradox.
What you could do, is append a link and a div after the images are fully loaded.
For example: If the images are loaded, you could:
$("#someDiv").append("<a href='#SomeOtherDiv'></a>");
$("#someDivAtTheBottomOfThePage").append("<div id='#JumpToThis'></div>");
Related
I have two overlayed divs (let's call them top and bottom), and the visible div can be swapped by the user (I set opacity = 0 on the top div to show the bottom one). Each has a different img. The user can change the images like a photo gallery, where two arrows change the src of both img using JavaScript.
The user may only click the arrows when the top div is visible.
However, sometimes after the user clicks one of the arrows (changing both images), and then hides the top div, the bottom div image doesn't show up at all. The src is changed with no problems, but there is no image visible.
Here's a screenshot:
As you can see, there is no image visible, even though DevTools shows the correct source and picture. If I change the viewport size slightly (by resizing the window, or bringing up DevTools), it magically appears. This does not always happen, sometimes the picture is shown with no issues. What is going on?
Thanks.
I have a problem where when the page is resized or a div with an image in it moves on the page, the image gets pixelated, then becomes sharp again a few seconds after the page stops moving.
In my CSS code, the img tag has a "-ms-interpolation-mode: bicubic;" property, but even without that the same behavior occurs. Any idea how to prevent this?
I have created a header image of about half a page. When user scroll down the images goes down with scrolling as well. I want the image to go up and hide and does not effect the content beneath it. I have checked many single page websites websites where images are on some place and when scrolling they goes up and down with scrolling and does not effect the other things.
I tried to use position:fixed but it didn't work, position:relative is also effecting the content beneath it.
Example of what i want : http://www.piedpiper.com/
Kindly tell me how to do this.
Set position:fixed for parent element of image.
I have a long list of <div>s that contain <img />s and I don't want the page to be slowed down by the loading of all the images.
So, right now, I have the url to all the images in the data-src attribute and the src attribute is empty.
How can I load the image, move the contents of the data-src to src when that div or img is visible in the viewport with javascript / jquery?
By visible in the viewport, I mean when the user has scrolled to those images.
All the images are in divs, which are in a vertical list.
You can use lazy load plugin in jQuery.I think it is best suited for u
Lazy Load is a jQuery plugin written in JavaScript. It delays loading
of images in long web pages.
SEE HERE
Using the DOM I plan to load images into a page that are outside of the viewport of the browser.
THEN
only after the viewport scrolls over to a position in which the image div is located
does the image asset load.
Is there a simple answer to this that I just could not find?