Using AJAX to pass a generated image from PHP back to javascript - javascript

I have a php file generating a diagram as an image - this is working fine
This php file has to communicate with javascript (via ajax) to load this image in the html
Initially I got it working by placing this in the javascript:
document.getElementById("img3").src="ajax.php?area=" +encodeURIComponent(area);
where img3 is the image in the html and ajax.php is the php file generating the image
The problem with this code however is there are a few lines after the code above executing before the image is loaded - a timing problem.
Changed javascript/ajax code to:
ar = new XMLHttpRequest();
if(ar.readyState == 4 || ar.readyState == 0)
{
ar.open("GET", "ajax.php?area=" +encodeURIComponent(area), true);
ar.send(null);
ar.onreadystatechange = function()
{
if(ar.readyState == 4)
{
document.getElementById("img3").src = ar.response;
}// end if
}// end function
}// end if
Was with the hope I could place my lines of code inside the if(ar.readyState == 4) block which will solve the timing problem. But the image isn't loading. Any ideas?

I understand that you don't really care how the image is loaded (using src or ajax) but what you want is to execute a piece of code after an image has loaded.
There are several (some better than others) ways of checking if an image is loaded. This tread covers some of them.
For instance you could use the onload event to trigger a piece of code
document.getElementById("img").onload = function() {
//do the code which has to be executed after loading the image.
}
They describe some problems with the event not firing when the image loads from cache, but a browser (almost) never caches a .php file with get parameters. You should check if caching is an issue for your project, based on what i understand from your project i think it is not a problem.
They suggest other options which are interesting to investigate. There is one i find interesting where they suggest using imageloaded. That solution looks very solid.

Related

jQuery + PHP Issues / / Include file & AJAX not working in WordPress

I've been making a little ad wall plugin for WordPress that has a single settings page that allows the user to edit and save the CSS and HTML files that my plugin uses.
All it does is include a CSS and JS file on the page. This is my first time with WordPress/PHP, so it took a lot of effort to get all of my directory calling correct.
This last thing is in the way though - the JavaScript file needs to load an HTML file's contents into a div on the page, but AJAX was simply not working (directory error in console).
Here's the JS now after I tried to circumvent AJAX (don't laugh):
jQuery(document).ready(function(){
adsense = 'adsbygoogle';
if(jQuery("." + adsense).length == 0) {
} else {
jQuery('body').append('<section id="asub00LOAD"></section>');
jQuery('#asub00LOAD').html('<?php $URL = file_get_contents(plugins_url("html/adunblock.html",__FILE__ )); include_once("$URL"); ?>');
setTimeout(function(){
var ad = jQuery('.adsbygoogle')[0];
var ck = window.getComputedStyle(ad,null);
console.log(ck.display);
if(ck.display=='none'){
jQuery('body > div').addClass('blur');
jQuery('.asub00').fadeIn(500);
jQuery('.asub00_msgWin').fadeIn(1000);
}
else{ }
},1200);
}
});
This being the main issue:
jQuery('body').append('<section id="asub00LOAD"></section>');
jQuery('#asub00LOAD').html('<?php $URL = file_get_contents(plugins_url("html/adunblock.html",__FILE__ )); include_once("$URL"); ?>');
The issue with using PHP is that I can't see it in the console, but I'm sure the issue is with the directory again. I just don't know if I should go back to trying to get the AJAX to work again now (I tried making a PHP variable in the JS file that gets the file URL and puts it in a JS var, then calling that with AJAX...didn't work out, but I still feel like I was onto something there).
Anyway, I'm frustrated and I hope someone here with experience in making plugins with WordPress might be able to see the issue fairly easily - any help is appreciated!

How to lazy load images and make them available for print

Some websites have lots of images, so lazyloading seems appropiate to reduce load times and data consumption. But what if you also need to support printing for that website?
I mean, you can try to detect the print event and then load the images, with something like this:
HTML
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
Note: this is a one by one pixels gif dummy image.
JavaScript
window.addEventListener('DOMContentLoaded', () => {
img = document.querySelector('img');
var isPrinting = window.matchMedia('print');
isPrinting.addListener((media) => {
if (media.matches) {
img.src = 'http://unsplash.it/500/300/?image=705';
}
})
});
Note: if you try this in a code playground, remove the DOMContentLoaded event (or simply fork these: JSFiddle | Codepen).
Note: I didn't event bother with the onbeforeprint and onafterprint for obvious reasons.
This will work fine if the image is cached, but then again that's precisely not the point. The image/s should all load and then appear in the printing screen.
Do you have any ideas? Has anyone successfully implemented a print-ready lazyloading plugin?
Update
I've tried redirecting the user after the print dialog is detected, to a flagged version of the website a.k.a website.com?print=true where lazyloading is deactivated and all images load normally.
This method is improved by applying the window.print() method in this flagged print-ready version of the page, opening a new print dialog once all images are finished loading, and showing a "wait for it" message in the meantime at the top of the page.
Important note: this method was tested in Chrome, it does not work in Firefox nor Edge (hence why this is not an answer, but a testimony).
It works in Chrome beacuse the print dialog closes when you redirect to another website (in this case same url but flagged). In Edge and Firefox the print dialog is an actual window and it does not close it, making it pretty unusable.
Based on your desired functionality, I'm not quite sure what you want to do is feasible. As a developer we don't really have control over a users browser. Here are my thoughts as to why this isn't fully possible.
Hooking the event to go and load your missing images won't let you guarantee images will make it from the server into your page. More specifically, the PDF generated for your print preview is going to get generated before your image(s) is done loading, the img.src = "..." is asynchronous. You'd run into similar issues with onbeforeprint as well, unfortunately. Sometimes it works, sometimes it does not (example, your fiddle worked when testing in safari, but did not in Chrome)
You cannot stall or stop the print call -- you can't force the browser to wait for your image to finish loading in the lazy loading context. (I read something about using alerts to achieve this once, but it seemed really hacky to me, was more of a deterrent to printing than stalling)
You cannot force img.src to get that data synchronously in a lazy-load context. There are some methods of doing this, but they are clever hacks -- referenced as pure evil and may not work in always. I found another link with a similar approach
So we have a problem, if the images are not loaded by the time print event is fired, we cannot force the browser to wait until they are done. Sure, we can hook and go get those images on print, but as above points out, we cannot wait for those resources to load before the print preview pops up.
Potential solution (inspired by links in point three as well as this link)
You could almost get away with doing a synchronous XMLHttpRequest. Syncrhonous XMLHTTPRequests will not let you change the responseType, they are always strings. However, you could convert the string value to an arrayBuffer encode it to a base-64 encoded string, and set the src to a dataURL (see the link that referenced clever hacks) -- however, when I tried this I got an error in the jsfiddle -- so it would be possible, if things were configured correctly, in theory. I'm hesitant to say yes you can, since I wasn't able to get the fiddle working with the following (but it's a route you could explore!).
var xhr = new XMLHttpRequest();
xhr.open("GET","http://unsplash.it/500/300/?image=705",false);
xhr.send(null);
if (request.status === 200) {
//we cannot change the resposne type in synchronous XMLHTTPRequests
//we can convert the string into a dataURL though
var arr = new Uint8Array(this.response);
// Convert the int array to a binary string
// We have to use apply() as we are converting an *array*
// and String.fromCharCode() takes one or more single values, not
// an array.
var raw = String.fromCharCode.apply(null,arr);
// This is supported in modern browsers
var b64=btoa(raw);
var dataURL="data:image/jpeg;base64,"+b64;
img.src = dataURL;
}
Work around to enhance the user experience
Something you could do is have some text that only displays in the print version of your page (via #print css media) that says "images are still loading, cancel your print request and try again" and when the images are finished loading, remove that "still waiting on resources try again message" from the DOM. Farther, you could wrap your main content inside an element that inverses the display to none when content is not loaded, so all you see is that message in the print preview dialog.
Going off of the code you posted this could look something like the following (see updated jsfiddle):
CSS
.printing-not-ready-message{
display:none;
}
#media print{
.printing-not-ready-message{
display:block;
}
.do-not-print-content{
display:none;
}
}
HTML
<div class="printing-not-ready-message">
Images are still loading please cancel your preview and try again shortly.
</div>
<div class="do-not-print-content">
<h1>Welcome to my Lazy Page</h1>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<p>Insert some comment about picture</p>
</div>
JavaScript
window.addEventListener('DOMContentLoaded', () => {
img = document.querySelector('img');
var isPrinting = window.matchMedia('print');
isPrinting.addListener((media) => {
if (media.matches) {
img.src = 'http://unsplash.it/500/300/?image=705';
//depending on how the lazy loading is done, the following might
//exist in some other call, should happen after all images are loaded.
//There is only 1 image in this example so this code can be called here.
img.onload = ()=>{
document.querySelector(".printing-not-ready-message").remove();
document.querySelector(".do-not-print-content").className=""
}
}
})
});
I'm the author of the vanilla-lazyload script and I've recently developed a feature that makes print of all images possible!
Tested cross browser using this repo code which is live here.
Take a look and let me know what you think!
I'm open to pull requests on GitHub of course.
I wrote a lazy loading jquery plugin that supports showing images on print using the window.onbeforeprint events and mediaQueryListeners.
https://github.com/msigley/Unveil-EX/
//declare custom onbeforeprint method
const customOnBeforePrint = () => {
const smoothScroll = (h) => {
let i = h || 0;
if (i < 200) {
setTimeout(() => {
window.scrollTo(window.scrollY, window.scrollY + i);
smoothScroll(i + 10);
}, 10);
}
};
let height = document.body.scrollHeight;
let newHeight;
while (true) {
smoothScroll(100);
if (newHeight === height) break;
height = newHeight;
}
};
//override the onbeforeprint method
window.onbeforeprint = customOnBeforePrint;
Copy&Paste that block into devtool's console and then try to click print button. That workaround is working for me.
For whoever is in the same boat as I was: when using the browser native loading="lazy", you can simply remove that attribute when printing is going to happen. Below is my jQuery implementation.
window.onbeforeprint = function () {
$('img').each(function () {
$(this).removeAttr('loading')
});
}
Chrome will then just load all images and they will show up when printing.

document.getElementById("").getElementsByTagName("img")[0].src = Not Working

I have these 3 lines of code in an external javascript file
function init(){
document.getElementById("upcoming_event").getElementsByTagName("img")[0].src = "images/fastnet_2013_poster.jpg";
document.getElementById("club_championship").getElementsByTagName("img")[0].src = "images/club_championship.png";
document.getElementById("setMembership").getElementsByTagName("img")[0].src = "images/join_our_club.png";
}
document.addEventListener( "DOMContentLoaded" , init , false);
This code works perfectly on this site which i used just to develop a little bit of it with 000webhosting.
But I have now moved my hosting to hosting24 to complete the development of the site. When i load the site through the new host(hosting24) the images are not getting loaded.
I have taken these 3 line of code out and tried them in an <body onload="init()"> but this dose not load the images either.
I know that both methods above are being called as i have got them to display a window.alert("Display").
Is there another way of doing this?
(document.getElementById("upcoming_event").getElementsByTagName("img")[0].src = "images/fastnet_2013_poster.jpg";) that i could try and use? Or solve my problem.
Changing servers should not effect javascript code at all. Only thing that comes to mind is that the URL's for the images sources isn't correct anymore, because of the move.
First you can use jQuery to help you do this in a simpler way like:
$('#upcoming_event').find('img')[0].src = "url";
or
$('#imgid').attr('src', 'xpto.jpg');
Secound, the code seems to work... I think the problem may be in the urls of the IMGs. Check if the images are in the correct folder or if the path is right.

image cache image ready

I'm trying to add tag on an image using java script.
Image cache creates the cached image when the image is first loaded, so that when the java script code tries to add tags on to image it places them wrong places becouse of image is not ready yet. It places them as a line.
When java script code is called the second time, it places tags on correct places becouse of cached image is already created.
How can I understand in java script domain that image cache finished it's job and create the cached image?
The image is placed in a div which it's id is '#tag_container'
The image's id is '#imagecache_taggable_image'
Drupal.behaviors.tagRestore = function (context) {
...
...
$('#tag_container').addAnnotations(tag_locations );
// first time I called addAnnotations #imagecache_taggable_image is not ready
// so that it places tags wrong places as a line
...
...
}
Kind regards...
I believe the image's onload event should be good for that.
http://www.w3schools.com/jsref/dom_obj_image.asp
Here's sample jQuery code:
$('#imagecache_taggable_image').bind('load', function() {
console.log('loaded', this);
//do custom code here
});

Works on browser but not as app

I have a problem.
A strange problem.
I have this part of code:
Actions.loadWizzard = function(href)
{
alert(1);
var wizardTimer;
var wizardTimer2;
if (navigationObject.getLocation(href) === "ProductInformationWizzard") {
navigationObject.newPage("loading");
wizardTimer = setTimeout("navigationObject.newPage('contentProductInformationWizzard');", 3000);
wizardTimer2 = setTimeout("window.productInformationWizzardObject.init()", 1000);
} else if (navigationObject.getLocation(href) === "contentAdviceWizzard") {
navigationObject.newPage("loading");
wizardTimer2 = setTimeout("window.adviceWizzardObject.init()", 10000);
}
return;
};
And on the normal browser it works excactly as it should work.
As a WRT though (or phonegap app) it doesn't.
It doesn't give me the alert (used for debugging). It doesn't use the setTimeout. evaluates instantly or something. And the loading page is not shown.
yeah, sometimes it shows up once.
Another problem is that the loading div has a GIF img. It;s like a loading img.
But the thing is just static. It's like normal image instead of a animated GIF.
How is this possible.
Some notes to the code:
navigationObject.newPage(page);
This hides the current div i'm viewing and shows the div i pass to it.
window.adviceWizzardObject.init();
This makes an ajax request to a jsonrpc server and then evaluates the data json retreived and set's up the wizard.
Thanks in advance,
Erik
It does work,
But becouse of some caching or something the old versions were loaded or something like that.
Restarting my phone solved the problem.

Categories

Resources