I'm trying to scrape all products from this webpage's 1st page that is apparently using offline lazyloading. At first, it only shows/loads 12 products, but when you scroll a bit, it shows additionally 24 products by filling up the <div class="lazyload-placeholder"></div> HTML element without making a single request, meaning, it already has them saved somewhere. My question is where?
The lazy image data is actually already in the page source!
One way to figure this out is load the page in your browser, find and copy image url. Then open page source and ctrl+f for your image:
Here you can see it's under picture tag. You can use css selector picture>source::attr(data-srcset) to find all lazy images.
Related
I would like to confirm what effect this CSS code has on the homepage of a wordpress website.
.lazy { display: none !important; }
Many thanks for explanations.
I have noticed images in the homepage are being blocked from being displayed which is why im asking this question.
The CSS code itself, prevent any element which has it from being displayed on the screen.
Due to its name, it may be used to enable something called lazyload (you can read about it here).
lazyload is usually used for several reasons:
Remove the pressure of loading many images at first; sometimes images are placed at the end of the page so the client won't see it at the top of the page, with lazy loading trick it. You can prevent those images from being loaded, and force them to load only the moment your client reach them by scrolling or other events so it cause page loading improvements (because the page is now lighter)
For making some visual effects; almost everywhere you need the image to be hidden and after some juggling or some specific events it is shown (like wp-admin and sub-menus, which will be shown if you hold your mouse on or click them)
etc
Recording to the reasons; I guess your kind of codes (which will be handled in client-side and client browser) does not fit the first reason and may be used for the second one because for the first reason it is better (and I guess it must) implemented on server-side. Why? Because in your code, the image is loaded and be will there and just not shown because of the CSS code
This was all I know but if you want a more specific answer you have to say where you saw it in WordPress, in a plugin, wp-admin, template, etc...
Hope the answer becomes handy for you
I am upgrading from Fancybox-2 to Fancybox-3. My site uses fancybox to display blocks of HTML as an overlay on page. For instance, if you click on my Terms and Conditions, fancybox uses a file fb/tandc.php that has all the HTML of the box to be displayed.
Some of the boxes use data from my database and use php programming to generate the HTML - for instance I have a list of participants retrieved from the database.
When planning the upgrade, I added a switch on my site that allows me to decide if I want to run version 2 or 3 of fancybox. In testing, many of the boxes display the same whether I use version 2 or 3 - in other words I have not changed the source code, only the way I call fancybox.
My problem is that for some reason, some boxes do not display the full content. When I have checked the page source, everything is there but I have noticed that some elements have style="display:none" defined. This is not coming from my code, so I assume fancybox is adding it.
My question, therefore, is how can I stop this?
I have tried to find answers but not successful. I did find a post that disabling AdBlocker in Chrome may help but this had no impact.
I get the same behaviour in Chrome and FF
I have included screenshots that show how the elements contain the style; the code used to call fancybox; the options I am using.
page debug elements
call to fancybox
options used
Just added this screenshot of code to be displayed. I tried adding a style that I hoped would override what fancybox is doing, but did not work either.
code to be displayed in fancybox
This is how the content looks in v2 fancybox
content in version 2
and if I have exactly the same content, but use v3 fancybox:
exactly same content in version 3
Using ajax to load fancybox with content from a file seems to create elements where it inserts style="display:none" - I have no idea why. However, I figured a work around where instead I created inline content on the page that is hidden and then simply used data-src="#hiddenContent" as in the docs.
It's made my page huge though when I have a lot of surveys, with a lot of participants on each!
I'm trying to develop my knowledge with examples of file_get_contents and I am testing it on the BBC news page, most read (www.bbc.co.uk/news middle right). At the moment I have it loading the whole page, however I wish to only have the Most Read section. I thought of looking at the div and doing preg_match with DOMdocument, however it doesn't have a specific div.
Any ideas how I could load just the most read section onto my wordpress site (alternatively, I tried using wp_remote_get, however it wouldn't load, so either way would be great for me)
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that
The problem is the next: I have a recipe with images, and I have a video with node reference to the recipe (so I can hav a one to many). (see here)
When there is a video, it should not show an image, when there is no video, it should show the image.
I created a block for displaysuite, and attached the video to it.(see here), in 2 displays.
Now all i want is a theming function where all the image and video's are in so I can do some logic and format everything, but the video's and images are processed sepperately.
Can anyone help me out please ?
Not totally sure what I am missing, but assuming your view works and you have a display that shows all of the proper fields, it should just be a matter of creating an instance of views-view-fields.tpl.php for your particular view and/or display, and putting your logic there. If you click on the Theme link on the view, it will show the view template suggestions.
At the moment, I did it this way:
I get all the video's and images from a Node. Because the images and videos are different displays (video's is an attachement) they are rendered by different template functions. So in the functions a create an object in the $GLOBALS variables, that stores all the videos and images.
Then I create a template that renders the entire node, and I check the images and video's in the $GLOBALS with some if else's.
Looks like a dirty method (it probabely is) but it works