There is a page with a large number of images. The images are set as a CSS style background looking like this:
<div style="background-image: url("http://test.com/abc123.jpg");">
The page loads, but sometimes, some images are not loaded. The URL is still set, the DIV has the correct size, only the image itself is not displayed. (This may be due to a browser, server or a network problem but that is not important here - we only want to know whether the image is loaded or not).
How can I check that a background image like this has been loaded?
You could get browser log and analyze it for errors https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/log
Or you could inject some js that will validate such elements https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/execute
I could not find a way to detect loading of background image, but you could inject hidden img and bind on its 'load' event. But its not very reliable between browsers, see http://api.jquery.com/load-event/
Related
I'm very new to Webflow. I am somewhat familiar with CSS and web design concepts.
I downloaded one of the clonable templates to use as a practice:
https://webflow.com/made-in-webflow/website/Spaces-Urbanistic
With this template, I try to replace the logo image on the upper left.
I have a colorful webpage logo and inside the designer, I see all the colors.
When I click on preview, the logo turns into a grayscale image.
Webflow has Effects option that I could enable, but it is currently set to off, for Logo image element as well as all parent nodes up to the body tag.
When I inspect the logo in chrome dev tools, the immediate parent has this CSS:
element.style {
filter: invert(100%)
grayscale(100%)
contrast(128%);
}
My question is, where do those filter parameters are stored in webflow interface, if not under Style->Effects->Filters? Is there any other place I don't yet know about where the above code can be injected?
Thank you,
edit-1: I just noticed this code on top of the main HTML file:
Still, doesn't help me to identify where this code comes from. Thank you,
I'm using the ACF gallery field to add images into a custom post type. The problem is that in the case of one post I've added around 80 images which means that they all have to load before Masonry is triggered. I thought I'd use lazy load to load the images in as you scroll down the page but that requires for you to know the image dimensions.
I found this https://github.com/okadots/masonry-wp-lazy-load but it turns out that it isn't very secure.
Anybody have any other ideas?
You can use something like imagesLoaded (which is made by the creator of Masonry) to make sure all images are loaded before triggering Masonry.
imagesLoaded in Masonry documentation: http://masonry.desandro.com/appendix.html#imagesloaded
You can use the imagesLoaded plugin, found here: http://imagesloaded.desandro.com/ then each time an image gets loaded you can refresh the layout of the grid, it will look like this:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
each time you add more items to the grid, probably via AJAX, you'll need to execute the lines where you layout masonry
if you are having a hard time with this you can use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can have lazy load, you only specify the URLS of your images and the plugin will do the rest, you can configure how many images you want to load on each set
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}
My query is that - I have my images on webpage- a logo or say navigation bar i can store as an image. Can i test using selenium presence of these images on a webpage when loaded along with the position of the image on page.
What my issue is that i need to actually look at image objects in HTML and also may be images not in HTML but they are partial screenshots of webpage which i want to match. This test will help me pick alignment issues - in case my navigation bar is now going to second row i can match with previous stored image to check.
Thanks
VB
An example on how to check if a particular image is present:
In this page:http://www.google.ie/firefox?client=firefox-a&rls=org.mozilla:en-US:official
Selenese command
Command: verifyElementPresent
Target: //td/table/tbody/tr/td/table/tbody/tr/td/img[#src='/images/firefox/Fx4Launch.png']
Hint: If you want help to get the XPath for a particular element I recommend you using a plugin like Firebug (http://getfirebug.com/)
Put an extra "\" in the beginning of the xpath copied by Firebug, otherwise selenium do not find the element.
You can verify that an image is at a location like so:
verifyElementPresent //div/p/img
This example uses XPath to locate an <img> element that follows a <div> and <p> tag.
But verifying that a screenshot is the same as the rendered page? You're talking about a completely different problem, which is image recognition. Selenium is a tool for automated acceptance testing.
I can't figure out why my background images in my absolutely positioned divs aren't displaying. I'm using firefox, but also in Chrome.
Pariticularly odd is that when viewing the page with the web developer toolbar's Edit CSS dialogue open, the images appear.
The images in question are a div with an id of "joel-image" and the nav items.
http://joelglovier.com
The paths in css are relative to the actual css file .. not the html page..
so your path should either be ../img/joel-image.jpg or better /img/joel-image.jpg
Currently your css file is in /css folder, so the background image property of url(img/joel-image.jpg) translates to /css/img/joel-image.jpg which is wrong ..
The request the browser is making to the image, is returning a 404. So the path to your image is wrong. Double check it. Try an absolute path.